VUE中引用路徑的配置

在vue項目開發中常常引用JS、CSS、IMG文件。當項目較大時文件層級不少，致使路徑很長，咱們能夠經過在bulid > webpack.base.conf.js 設置簡便的引用路徑

1、引用assets目錄下的文件

舉例：

一、在src > components > content > Content.vue 中引用
src > assets > img > arrow.png

圖片引用代碼，引用路徑就會比較複雜

<img class="down-page-img" src="../../assets/img/arrow.png" alt="">

解決辦法：
一、在webpack.base.conf.js 中給src/assets設置引用路徑 assets

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // add assets路徑
      'assets': resolve('src/assets'),      
  },

二、使用設置好的引用路徑， "~assets"

<img class="down-page-img" src="~assets/img/arrow.png" alt="">

三、注意事項，設置好引用路徑，必需要重啓項目才能生效。否則會報錯
四、配置JS、CSS文件一樣操做

2、引用static目錄下的文件

解決辦法：
一、在webpack.base.conf.js 中給static設置引用路徑 static

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      //  add static路徑
      'static': path.resolve(__dirname, '../static'),     
  },

二、使用設置好的引用路徑， "~static"

<img class="down-page-img" src="~static/js/test.js" alt="">

三、注意事項，設置好引用路徑，必需要重啓項目才能生效。否則會報錯
四、配置JS、CSS文件一樣操做

最後給你們分享一個關於webpack.base.conf.js配置文件解析的文章
vue-cli腳手架build目錄中的webpack.base.conf.js配置文件