详解如何配置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 prototype属性深入介绍
Nov 27 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
vue 搭建后台系统模块化开发详解
May 01 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
php5 图片验证码实现代码
2009/12/11 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python实现统计代码行的方法分析
2017/07/12 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
python 安装移动复制第三方库操作
2020/07/13 Python
如何使用Pytorch搭建模型
2020/10/26 Python
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
完美的中文自荐信
2014/05/24 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
平面设计专业求职信
2014/08/09 职场文书
新员工入职感想
2015/08/07 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang