如何配置vue-cli 3中vue.config.js的路径别名？

前段时间更新电脑重装了一下vue-cli，发现了vue-cli已经更新到3.0版。用来搭建项目后发现简化了很多，而且配置文件现在可以全部统一在vue.config.js中，很方便有没有，从此以后一个配置文件走遍公司大小项目，妈妈再也不用担心我每次新建项目时重新配置各个复杂的选项了。那么怎么在vue.config.js中配置路径别名呢？

1. 创建项目

2. 在根目录下新建 vue.config.js

3. 修改vue.config.js

// vue.config.jsmodule.exports = { ?configureWebpack: { ???resolve: { ?????alias: { ???????‘assets‘: ‘@/assets‘, ???????‘components‘: ‘@/components‘, ???????‘views‘: ‘@/views‘, ?????} ???} ?},}

之所以用‘@/assets‘，是因为偷了个懒利用3.x中/node_modules/@vue/cli-service/lib/config/base.js中已经配好的@路径,有兴趣的可以进入文件里面看一看

··· ???webpackConfig.resolve ?????.set(‘symlinks‘, false) ?????.extensions ???????.merge([‘.js‘, ‘.jsx‘, ‘.vue‘, ‘.json‘]) ???????.end() ?????.modules ???????.add(‘node_modules‘) ???????.add(api.resolve(‘node_modules‘)) ???????.add(resolveLocal(‘node_modules‘)) ???????.end() ?????.alias ???????.set(‘@‘, api.resolve(‘src‘)) ???????.set( ?????????‘vue$‘, ?????????options.runtimeCompiler ???????????? ‘vue/dist/vue.esm.js‘ ???????????: ‘vue/dist/vue.runtime.esm.js‘ ???????)···

参考文档：
vue-cli3 webpack 相关简单的配置方式
webpack resolve.alias

来源：https://segmentfault.com/a/1190000016135314

【vue-cli 3.0】 vue.config.js配置 - 路径别名

原文地址：https://www.cnblogs.com/lovellll/p/10145419.html