vue中 靜態文件引用注意事項


(一)assets文件夾與static文件夾的區別

區別一:assets文件是src下的,所以最后運行時需要進行打包,而static文件不需要打包就直接放在最終的文件中了

區別二:assets中的文件在vue中的template/style下用../這種相對路徑的形式進行引用,在script下必須用@import的方式引入,

              而static下的文件在.vue中的任何地方都只要使用../這種相對路徑的方式引入

總結一下

1.assets用來放置樣式、靜態圖片,只要src下面的組件中用到的資源就放在assets中。

2.static用來放沒有npm包的第三方插件,字體文件。

3.assets與components同級  components下的.vue引用靜態文件時,相對路徑為 ../assets/wapFront

 

 

4.assets與app.vue同級  相對路徑為 ./assets/wapFront

 

 

 

(二)vue如何引入其它靜態文件:

1.src目錄下的資源只能import或require。

2.想靜態引入的話,建立一個與src同級的目錄例如static,然后把靜態資源放入該文件夾下,html的引入路徑如下:./static/...

注:試過一定要放在static文件夾下,否則報錯

 

(三)vue如何引入sass

npm i sass --save-dev 裝下它

npm i sass-loader --save-dev 再裝下它

在webpack.base.config配置文件里加上這段
{
  test: /\.scss$/,
  loader: 'style!css!sass'
},
在組件文件.vue里直接引入scss樣式
<style lang="scss">
  .hello input {
  color: red;
}
</style>

(四)vue報錯cannot GET
1.你init vue-cli的時候,有個選項問你是否需要eslint可以選擇不需要,因為它是檢驗的,可以不用,如果用它格式寫的不規范啟不來頁面

2.如果已經安裝eslint,將下圖所示部分注釋掉,eslint對空格要求比較嚴格


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM