在开发过程中，由于模块越来越多，需要建立的文件夹就会越来越多，目录层级越来越深。这样就会导致import引用时极不方便，比如说：
如果在开发过程中能够使用某别名来指代根目录或src文件夹（开发过程中引用的文件一般都在src下），达到下图的效果，是最好不过的了（程序员一般都是有强迫症的，可能要达到目的写的代码要远远大于这几个.，虽然可以达到目的，但是太难看了）。
weboack.base.config.js文件 去网上查阅了资料之后，发现可以通过更改weboack.base.config.js中的resolve.alias来达到目的。
module.exports = {
···
···
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
}
}
···
···
}
这样就可以使用@来指代./src文件夹，同样，也可以在alias对象中继续添加其他路径的别名。
然而问题没有这么简单…
当初为了方便，我是使用craete-react-app脚手架来搭建的工程，在不想使用react-scripts eject来显示webpackage等的配置文件的情况下（那样会破坏目录结构，并且是不可逆的），只能另寻其他方法。。。
customize-cra来定制配置 之前使用高阶组件、less等配置时，引入了customize-cra并创建了./config-overrides.js来定制webpackage的一些属性。使用这一方法，同样可以配置路径别名：
const { addWebpackAlias } = require('customize-cra')
module.exports = override(
···
···
addWebpackAlias({
['@']:require('path').resolve(__dirname, 'src')
})
···
···
)
经过上述配置，终于可以在文件中使用@来代替巨长无比的路径了！
然而，使用别名替代后，vscode不再能智能提示来补全路径了（我就知道没这么简单）。。。
后来查到了一个vscode官方提供的方法：通过自定义jsconfig.json文件来重新激活相应的路径智能提示。在项目根目录下，新建一个jsconfig.json文件，内容如下（大神是这么说的）：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
但是，做了如上配置之后，编译报错。。。
根据错误提示，将baseUrl做出对应的修改即可：
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"baseUrl": "src",
"paths": {
"@/*": ["*"]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
然而，然而，再次然而。。。还是存在问题。。。
经过上述设置，路径补全功能实现了，但是补全的文件夹下面文件补全功能有bug，目前只能自动提示*.js 文件，图片、css等文件不会提示。。。
不再使用jsconfig.js，使用vscode插件来实现路径补全：
这里选择的是Path Autocomplete插件，而不是Path Intellisense（之前使用的这一个，但是关于别名路径方面还是存在问题。。。）
在 工作区配置 .vscode/setting.json里面添加内容如下：
{
"path-autocomplete.excludedItems": {
"**/*.js": { "when": "**/*.ts" }, // ignore js files if i'm inside a ts file
"**/*.map": { "when": "**" }, // always ignore *.map files
"**/{.git,node_modules}": { "when": "**" } // always ignore .git and node_modules folders
},
"path-autocomplete.pathMappings": {
"@": "${folder}/src"
},
}
在path-autocomplete.pathMappings对象中配置别名对应的路径，即可实现别名下的路径补全，而且不只js文件会补全，其他文件也会。
关于文件的后缀，Path Autocomplete默认是不自动添加文件后缀的，可以通过在系统的配置文件里面（如果只想当前项目生效就在当前工作区的配置文件里面）设置"path-autocomplete.extensionOnImport": true。即可自动添加文件后缀。其他的设置见下图：
就这样，因为路径过长而想用别名代替所引起的一系列问题就解决了（我还要更改代码里对应的路径）。。。
参考资料：