详解如何配置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打开新窗口的2种方式
Apr 18 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
体育教师自我鉴定
2014/02/12 职场文书
寄语学生的话
2014/04/10 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
授权委托书
2014/07/31 职场文书
公司周年庆典标语
2014/10/07 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python