@vue/cli 4.x 配置 alias

在Vue项目开发中，经常需要引入不同目录的文件，通常我们是通过“import 文件名 from ‘文件路径’”的结构来实现对组件的引用，而当文件路径较深或者引用的组件跨越的较远时很容易引用出错，这里我们就要引入alias概念了，“别名”的意思，顾名思义标准名称以外的名称。

1. 查看webpack配置

我们在引入模块的时候经常会用到一个@符号，用@符号指代根目录下的src文件夹路径，@/就可以获取到src文件夹下的文件
为什么用@符号就能代表src文件夹呢，我们来看看webpack的默认配置。
在根目录下打开cmd控制台，输入如下代码：

vue inspect > output.js

然后你会发现在我们的项目根目录生成了一个output.js，这就是@vue/cli的配置文件，我们搜索alias，可以看到alias默认配置了@指向src文件夹，当然本地生成的是绝对路径。

2. 新建vue.config.js文件

@vue/cli打造的是零配置环境，所以手动配置webpack需要在根目录新建一个vue.config.js文件（这是个可选文件，项目创建时默认是没有的，不过@vue/cli-service会自动识别加载的）。

3. 修改alias

chainWebpack字段是一个方法，采用webpack 链式操作，操作更细微的功能，提供了一个 webpack原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件
具体查阅文档 chainWebpack使用

const path = require('path');
module.exports = {
	...
	chainWebpack: (config)=>{
	    config.resolve.alias
	      .set('@$', path.join(__dirname,'src'))
	      .set('components', path.join(__dirname,'src/components'))
	      .set('mixins', path.join(__dirname,'src/mixins'))
	      .set('store', path.join(__dirname,'src/store'))
  	},
	...
}

启动项目，使用我们配置的components/访问路径就可以了，其他的引用方法也是如此。

4. extensions字段

操作第一步的时候我们看到还有一个extensions，这个表示引用这种文件类型是可以省略不写后缀名的。
具体当做了解，省的以后写出来被别人笑话。