vuecli2/3解决文件路径过于复杂的方法

在脚手架中，文件路径变得越来越复杂，动不动就就是…/…/…/的。所以，通过配置路径的名字就显得非常重要了

1.简单配置

1.1首先打开build文件夹下的webpack.base.conf.js这个专门配置路径相关的文件

2.2找到这个resolve对象，发现它在alias下已经配置好一个’@’: resolve(‘src’),的东西了。这意味着你在路径前输入@就能找到src文件夹下的文件了
如：@/assets/img/a.jpg

2.进阶配置

2.1那便是套娃了，再设置assets为@/assets，这意味着在路径前写个assets就可以直接找到src下的assets文件夹，就连@都不用输入了
如：assets/img/a.jpg

实际上可以弄很多这些路径名字来使得你的代码更简洁

3.vuecli3中把所有配置文件都隐藏了起来，一般都不会去修改的，那么cli3怎么修改地址名呢

1.1在根目录下（即与README.md同级的目录下）创建vue.config.js的文件

cv一下代码即可

module.exports = {
	configureWebpack:{
		resolve:{
			alias:{
				// cli3默认配置好@路径了，所以是可以直接用的
				'assets': '@/assets',
				'components': '@/component',
				'common': '@/common',
				'network': '@/network',
				'views': '@/views',
			}
		}
	}
}

cli4配置代码

const path = require('path')
function resolve(dir) {
 return path.join(__dirname, dir)
}
module.exports = {
 lintOnSave: true,
 chainWebpack: config => {
  config.resolve.alias
   .set('@', resolve('src'))
   .set('assets', resolve('src/assets'))
   .set('components', resolve('src/components'))
   .set('common', resolve('src/common'))
   .set('network', resolve('src/network'))
   .set('views', resolve('src/views'))
 }
}