详解如何配置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 相关文章推荐
JS Timing
Apr 21 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
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
?算你??的 PHP 程式大小
2006/12/06 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php 获取本地IP代码
2013/06/23 PHP
php全角字符转换为半角函数
2014/02/07 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
JS作用域链详解
2017/06/26 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
python实现批量注册网站用户的示例
2019/02/22 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
Java程序员面试题
2016/09/27 面试题
五一劳动节活动记录
2014/03/23 职场文书
小学班主任评语大全
2014/04/23 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
五五普法心得体会
2014/09/04 职场文书
采购员岗位职责范本
2015/04/07 职场文书
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS