在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";

我们自己也配置一个路径的别名

文档

vue-cli3中chainWebpack操作

webpack.config.js中resolve.alias配置

HTML 和静态资源路径引用问题

用法

在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中配置是否写的有问题
• 检查使用的地方写法是否有问题
• 如果上述两个都没有问题，你需要重启编辑器或者重新编译整个项目