VUE中引用路径的配置

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

一、引用assets目录下的文件

举例：

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

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

解决办法：
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、使用设置好的引用路径， &＃8220;~assets&＃8221;

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、使用设置好的引用路径， &＃8220;~static&＃8221;

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

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