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

发布时间:2019-05-11 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【vue-cli 3.0】 vue.config.js配置 - 路径别名-vue脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

如何配置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.js module.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

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! vue,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的【vue-cli 3.0】 vue.config.js配置 - 路径别名-vue全部内容,希望文章能够帮你解决【vue-cli 3.0】 vue.config.js配置 - 路径别名-vue所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。