详解如何配置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 相关文章推荐
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
详解webpack 入门与解析
Apr 09 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
Vue实现购物车详情页面的方法
Aug 20 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中的mongodb select常用操作代码示例
2014/09/06 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
php中strtotime函数用法详解
2014/11/15 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
php解决安全问题的方法实例
2019/09/19 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
十八大闭幕感言
2014/01/22 职场文书
高三毕业寄语
2014/04/10 职场文书
建筑学专业自荐书
2014/07/09 职场文书
离职证明标准格式
2014/09/15 职场文书
学习与创新自我评价
2015/03/09 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python