VUE中引用路径的配置

在vue项目开发中经常引用JS、CSS、IMG文件。当项目较大时文件层级很多，导致路径很长，我们可以通过在bulid > webpack.base.conf.js 设置简便的引用路径

一、引用assets目录下的文件

举例：

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

图片引用代码，引用路径就会比较复杂

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

解决办法：
1、在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'),      
  },

2、使用设置好的引用路径， "~assets"

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

3、注意事项，设置好引用路径，必须要重启项目才能生效。不然会报错
4、配置JS、CSS文件同样操作

二、引用static目录下的文件

解决办法：
1、在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'),     
  },

2、使用设置好的引用路径， "~static"

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

3、注意事项，设置好引用路径，必须要重启项目才能生效。不然会报错
4、配置JS、CSS文件同样操作

最后给大家分享一个关于webpack.base.conf.js配置文件解析的文章
vue-cli脚手架build目录中的webpack.base.conf.js配置文件