在vue-cli3中自定义全局的路径信息（配置路径别名alias）

今天药忘吃喽~ 2022-02-01 13:43 602阅读 0赞

# 例子 #

![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操作][vue-cli3_chainWebpack]

[webpack.config.js中resolve.alias配置][webpack.config.js_resolve.alias]

[HTML 和静态资源路径引用问题][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'))
        }
    }

实际应用  
![实际应用][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]

## 报错 ##

![报错][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 1]

如果在使用中出现这种问题，措施如下

*  检查vue.config.js中配置是否写的有问题
 *  检查使用的地方写法是否有问题
 *  如果上述两个都没有问题，你需要重启编辑器或者重新编译整个项目

[alias]: /images/20220201/47f30498ae3741428b8443e47182d68c.png
[vue-cli3_chainWebpack]: https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7
[webpack.config.js_resolve.alias]: https://webpack.js.org/configuration/resolve/#resolvealias
[HTML]: https://cli.vuejs.org/zh/guide/html-and-static-assets.html#html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]: /images/20220201/0a935c9c79c04b2986de6550327ef35d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 1]: /images/20220201/154e6b6b7c664579831cfae0a471b53d.png