vue 引用src中的文件_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、使用设置好的引用路径， "~assets"

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"

3、注意事项，设置好引用路径，必须要重启项目才能生效。不然会报错

4、配置JS、CSS文件同样操作