vue中 靜態檔案引用注意事項

Leon Aries發表於2018-09-12

(一)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對空格要求比較嚴格


相關文章