在vue-cli3中自定义全局的路径信息(配置路径别名alias)
例子
在vue-cli3生成的初始项目中的iviews/Home.vue中可以看到这么一句话
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
这里的@
符号就是路径src
的缩写,如果正常写应该是这样
import HelloWorld from "../components/HelloWorld";
我们自己也配置一个路径的别名
文档
webpack.config.js中resolve.alias配置
用法
在vue-cli3的根目录中找到vue.confg.js,添加如下代码
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
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'))
}
}
实际应用
报错
如果在使用中出现这种问题,措施如下
- 检查vue.config.js中配置是否写的有问题
- 检查使用的地方写法是否有问题
- 如果上述两个都没有问题,你需要重启编辑器或者重新编译整个项目