vscode 在标签的src引入别名路径_vue-cli 3.0配置webpack目录别名alias

前言

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

查看webpack配置

我们在引入模块的时候经常会用到一个@符号，用@符号指代根目录下的src文件夹路径，@+/就可以获取到src文件夹下的文件。为什么用@符号就能代表src文件夹呢，我们来看看webpack的默认配置。使用命令： vue inspect > output.js可以在根目录下生成一份webpack配置文件output.js，在output.js我们搜索alias配置我们可以看到alias默认配置了@指向src文件夹。

新建vue.config.js文件

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

引入path 模块

先引入path 模块，它提供了一些工具函数，用于处理文件与目录的路径。path.join()方法用于连接路径，该方法会正确识别当前系统的路径分隔符，如Unix系统是”/“，Windows系统是”“。__dirname 是node的一个全局变量，即获得当前文件所在目录的完整目录名。

修改alias配置

接下来我们要配置的就是webpack中的alias属性了，这里我把常用的文件路径进行了配置，比如src、src/assets、src/components、src/layout、src/base、src/static等目录进行了配置，这样我们下次再引用的时候就不用去寻找路径了，直接使用别名即可。

设置别名的原理

resolve方法，在同一个文件里可以找到这样一段代码：const path = require('path')function resolve (dir) { return path.join(__dirname, '..', dir) }path是node里面的一个模块，主要作用是对路径进行处理。path.join() 方法会把给定的path片段连在一起。具体用法请查看node文档_path.join。__dirname表示的是文件所在的当前目录。resolve函数的含义就是把文件指向到和build文件夹同级的文件夹下。

应用示例

比如我在App.vue中引入components目录下的HelloWorld.vue文件，之前我们通过@符号来寻找import test from '@/components/HelloWorld'，现在我们只要直接使用import test from 'components/HelloWorld'就用可以找到对应的文件了。

补充

在输出的output.js文件中我们可以看到一个extensions属性：这个代表的是带这种后缀的文件可以自动解析，在引入的时候不用写后缀。