在Vue中配置别名
- vue-cli3以上隐藏了vue.config.js文件,故需手动创建
const path = require('path');
// 获取路径的函数
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 配置路径别名
lintOnSave: true,
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
.set('layout', resolve('src/layout'))
.set('base', resolve('src/base'))
.set('static', resolve('src/static'))
}
};
CSS或者HTML标签中使用别名要加上~
@是webpack中定义的别名，在JS中可以使用此别名，代替resolve('src')指向的路径import xxxxxx是JS语法，所以可以使用@别名而
<img src="@/assets/head.png" alt="">标签中，src作为一个属性值，其值是字符串并非是JS，所以不能用@别名在
url地址前加~标记可以让解析器将地址中的别名解析出来Issue中提出的方案是：
<img src="~@/assets/head.png" alt="">
WebStorm配置别名提示
- 在WebStrom的webpack配置添加项目的webpack.config.js文件即可
-
不过由于vue-cli3及往后版本都隐藏了webpack.config.js文件,不清楚路径的可能得找一会
