详解如何配置vue-cli3.0的vue.config.js


Posted in Javascript onAugust 23, 2018

本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下:

vue-cli 3 英文文档
vue-cli 3 中文文档
webpack 4 plugins
webpack-chain

TLDR

vue-cli 3 与 2 版本有很大区别

  1. vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下
  2. vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍)
  3. vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3
  4. vue-cli 3 的设计原则是“0配置”
  5. vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化

由于 vue-cli 3 也学习了 rollup 的零配置思路,所以项目初始化后,没有了以前熟悉的 build 目录,也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。

那么,我们该如何去配置自己的项目了?

其实这一切都是因为 vue-cli 3 的项目初始化,帮开发者已经解决了 80% ,甚至绝大部分情形下的 webpack 配置。

上述功能就是由 @vue/cli-service 依赖去处理,当你打开 node_modules 目录下 @vue 中的 cli-service 看一眼,是不是找到了熟悉的感觉?

详解如何配置vue-cli3.0的vue.config.js

说了这么多,开发者在实际开发过程中,肯定还有需要自己去修改配置的地方,那么,该怎么做了?

这点就需要在项目根目录下手动新建一个 vue.config.js,此处参考我提供的一个基础模板 [[vue.config.js]]

所以现在所有的问题都集中在了--- 我到底要怎么样去修改这个配置文件?

一些简单的配置,比如多页面、接口代理,大家可以自己去看下官方 doc ,文章最上面有提供。

如果需要改动原本 webpack 的配置,该怎么做了?

因为 vue-cli 3 中的 cli-service 对 webpack 4 引入了 webpack-chain 插件,同时对配置进行了高度抽象化,所以开发者想随心所欲的修改配置,操作方式就比以前更加难。在我的亲身实践下,总结了几点,供大家参考:

首先,修改点主要位于 vue.config.js 中的

configureWebpack: (config) => {
// 简单/基础配置,比如引入一个新插件
},
chainWebpack: (config) => {
// 链式配置
}
loaderOptions: {
   css: {
    // options here will be passed to css-loader
   },
   postcss: {
    // options here will be passed to postcss-loader
   }
}

具体操作可以看文章最上面的链接,此处不再赘述。

核心一点就是: cmd 中敲 vue inspect > output.js , 这样我们会得到一份最终生效的 webpack 配置信息,省去了你自己去看 cli-service 源码。

然后,我举个栗子:

我的项目中,需要修改 eslint 的配置,让它不去检测我项目下的 src/lib 目录,因为这里是外部库文件(其实此处也可以在项目中直接新建一个 .eslintignore文件去处理,但我这里选择修改 webpack 文件)

第一步: vue inspect > output.js

第二步: 在 output.js 中搜索 eslint 相关配置,结果如下:

详解如何配置vue-cli3.0的vue.config.js

第三步: 我确定了我要修的是 exclude 配置项

第四步: 去 mozilla-neutrino/webpack-chain 全局搜 exclude,结果如下:

详解如何配置vue-cli3.0的vue.config.js

第五步: 因为 exclude 只出现了一次,微微一笑很倾城。但是我看到了 include,接着搜 include,结果如下:

详解如何配置vue-cli3.0的vue.config.js

第六步: 参考 include 的写法,以此类推:

详解如何配置vue-cli3.0的vue.config.js

最后,我们在 vue inspect > output.js 看一下,

详解如何配置vue-cli3.0的vue.config.js

总结一下,在多用几次 webpack-chain 以后,相信我,你会发现很多规律,vue-cli 3 也就很简单啦。

后记

当你准备着手一个新的项目的时候,请事先想清楚这个项目的架构以及用到的ui组件等等

比如我们的项目

1. 使用vant UI组件
2. 封装axios服务
3. 使用路由拆分(基于history)
4. 路由切换动画
。。。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 #Javascript
React key值的作用和使用详解
Aug 23 #Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 #Javascript
从零开始学习搭建React脚手架项目
Aug 23 #Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 #Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 #Javascript
JS实现的简单分页功能示例
Aug 23 #Javascript
You might like
Zend公司全球首推PHP认证
2006/10/09 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
php商品对比功能代码分享
2015/09/24 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python的id()函数介绍
2013/02/10 Python
Python使用pymysql小技巧
2017/06/04 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
django中的图片验证码功能
2019/09/18 Python
python实现简单坦克大战
2020/03/27 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
自荐信格式
2013/12/01 职场文书
升学宴主持词
2014/04/02 职场文书
小学生新年寄语
2014/04/03 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
新闻传播专业求职信
2014/07/22 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
求职推荐信范文
2015/03/27 职场文书
银行服务理念口号
2015/12/25 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书