目录
vue-cli 3x 配置 => 给路径起一个别名上面给 src 和 src/components 等起了一个别名，那么在项目之中引用即可配置别名提示安装VS插件
vue-cli 3x 配置 => 给路径起一个别名
在根目录下创建vue.config.js
var path
= require('path')
function resolve(dir
) {
return path
.join(__dirname
, dir
)
}
module
.exports
= {
chainWebpack
: config
=> {
config
.resolve
.alias
.set('@', resolve('src'))
.set('@components', resolve('src/components'))
.set('@assets', resolve('src/assets'))
}
}
上面给 src 和 src/components 等起了一个别名，那么在项目之中引用即可
原本路径 ../assets/img/tabbar/category.png使用别名的方式 @assets/img/tabbar/category_active.png
<Tabbar-item path="/category" activeColor="blue">
<img slot="item-icon" src="../assets/img/tabbar/category.png" alt />
<img slot="item-icon-active" src="@assets/img/tabbar/category_active.png" alt />
<div slot="item-text">分类
</div>
</Tabbar-item>
配置别名提示
如果在webpack.config.js中配置了别名，在写代码使用时是不会有路径提示的，需要在jsconfig.json中给路径配置全局关联。
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["./src/*"]
}
}
}
安装VS插件
1：Path Intellisense 并安装2：配置Path Intellisense
首选项—> 设置 -> setting.json -> 进行编辑
{
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
}
3：在项目跟目录下，创建jsconfig.json文件
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": [
"node_modules"
]
}
4：使用 @/ XXX
