vue-cli 项目配置路径别名
vue-cli 项目配置路径别名1.vue-cli 2.x 配置方式在vue-cli 2.x项目中,进入build文件夹,找到webpack.base.conf.js,编辑文件 ,并找到resolve字段的配置项。resolve: {extensions: ['.js', '.vue', '.json'],//这个是匹配扩展名的alias: {//这里添加路径别名'@': resolve('src
·
vue-cli 项目配置路径别名
1.vue-cli 2.x 配置方式
在vue-cli 2.x项目中,进入build文件夹,找到webpack.base.conf.js,编辑文件 ,并找到resolve字段的配置项。
resolve: {
extensions: ['.js', '.vue', '.json'], //这个是匹配扩展名的
alias: {
//这里添加路径别名
'@': resolve('src'), //src解析成@
'assets': resolve('src/assets'), // src/assets解析成assets
}
}
2.vue-cli 3.x 配置方式
2.1配置文件位置(了解)
vue-cli 3.x以上的项目结构被精简了, 后来上网找了一下,配置文件被藏到了node_modules/@vue/cli-service/lib/config/base.js里面
.modules
.add('node_modules')
.add(api.resolve('node_modules'))
.add(resolveLocal('node_modules'))
.end()
.alias
.set('@', api.resolve('src')) //这里配置的
2.2配置方法(方法)
我们虽然知道了配置文件位置,但是我们不通过修改node_modules/@vue/cli-service/lib/config/base.js来添加路径别名,而是在项目的根目录创建一个vue.config.js。vue.config.js
是一个可选的配置文件,如果项目的 (和 package.json
同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service
自动加载。
const path = require('path'); //path模块
function resolve (dir) {
return path.join(__dirname, dir)
}
// 项目的主要配置文件
module.exports = {
//set第一个参数:设置的别名,第二个参数:设置的路径
chainWebpack: (config)=>{
//修改文件引入自定义路径
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
}
}
3.使用
使用的配置的路径别名时,为了区分原路径和别名我们用~符合来区分
<!--这条会按原路径找-->
<img src="assets/img/test.jpg"/>
<!--这条会按路径别名找-->
<img src="~assets/img/test.jpg"/>
更多推荐
已为社区贡献9条内容
所有评论(0)