Vue项目路径别名设置
用vue-cli搭建好vue项目之后,进入正式开发过程,有时候会发现各种import路径中都存在长串的重复路径,比如:import 'src/assets/styles/reset.css'import 'src/assets/styles/border.css'为了方便维护,可以打开build文件下的webpack.base.conf.js文件,在module.exports中找到resolv.
·
用vue-cli搭建好vue项目之后,进入正式开发过程,有时候会发现各种import路径中都存在长串的重复路径,比如:
import 'src/assets/styles/reset.css'
import 'src/assets/styles/border.css'
为了方便维护,可以打开build文件下的webpack.base.conf.js文件,在module.exports中找到resolve字段,在其中为重复路径设置一个足以表意的别名:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles'),
}
},
这里'styles'字段就是我设置的别名,以后在项目中引用路径含有'src/assets/styles'的文件,只需如下:
import 'styles/reset.css'
import 'styles/border.css'
更多推荐
已为社区贡献1条内容
所有评论(0)