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配置文件