vue-cli配置文件——config篇


Posted in Javascript onJanuary 04, 2018

最近一直在研究webpack,突然想看看vue-cli中的webpack是如何配置,查阅了很多相关的文章,所以也想出几篇关于vue-cli配置的东西。正所谓“工欲善其事必先利其器”嘛!这一篇主要是分析vue中关于 config文件夹中的相关代码 ;

首先我们先看一下config的文件结构:

|-config
|---dev.env.js
|---index.js
|---prod.env.js

打开我们的vue项目文件夹我们可以清楚的看到文件夹下的三个文件, “dev.env.js” , “index.js” , “prod.env.js” ,我们先打开prod.env.js的文件,看里面的内容:

'use strict'
module.exports = {
 NODE_ENV: '"production"'
}

prod.env.js的内容非常简单,仅仅是导出了一个对象,里面写明了执行环境是“production(生产环境)”;我们接下来看与之对应的“dev.env.js”文件:

'use strict'
//引入webpack-merge模块
const merge = require('webpack-merge')
//引入刚才打开的prod.env.js
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

在“dev.env.js”中,先引入了webpack-merge这个模块。这个模块的作用是来合并两个配置文件对象并生成一个新的配置文件,有点儿类似于es6的object.assign();

vue-cli中将一些通用的配置抽出来放在一个文件内,在对不同的环境配置不同的代码,最后使用webpack-merge来进行合并,减少重复代码,正如文档中所说,“ webpack遵循不重复原则(Don't repeat yourself - DRY),不会再不同的环境中配置相同的代码 ”

当然,关于webpack-merge的内容还远不止这些,想了解更多关于这个模块的朋友请访问 https://www.npmjs.com/package/webpack-merge

好,让我们接着回到代码中来,引入webpack-merge后这个文件又引入了prod.env.js,接着就将prod.env.js的配置和新的配置,即指明开发环境(development)进行了merge。(我有点儿不太理解为什么要这样做,如果不merge直接写module.exports={NODE_ENV:'"development'}也是可以的,难道是为了优雅降级?)

还有一点需要注意是的, development和production一定要加双引号,不然会报错!!!

最后,我们来看index.js:

'use strict'
// Template version: 1.2.4
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
 dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {},
 // Various Dev Server settings
 host: 'localhost', // can be overwritten by process.env.HOST
 port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 autoOpenBrowser: false,
 errorOverlay: true,
 notifyOnErrors: true,
 poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 // Use Eslint Loader?
 // If true, your code will be linted during bundling and
 // linting errors and warnings will be shown in the console.
 useEslint: true,
 // If true, eslint errors and warnings will also be shown in the error overlay
 // in the browser.
 showEslintErrorsInOverlay: false,
 /**
  * Source Maps
  */
 // https://webpack.js.org/configuration/devtool/#development
 devtool: 'eval-source-map',
 // If you have problems debugging vue-files in devtools,
 // set this to false - it *may* help
 // https://vue-loader.vuejs.org/en/options.html#cachebusting
 cacheBusting: true,
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false,
 },
 build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 /**
  * Source Maps
  */
 productionSourceMap: true,
 // https://webpack.js.org/configuration/devtool/#production
 devtool: '#source-map',
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
 }
}

开头引入了node中的path模块,

然后我们先来看dev下的配置内容:

assetsSubDirectory指的是静态资源文件夹,默认“static”,

assetsPublicPath指的是发布路径,

proxyTable是我们常用来配置代理API的地方,后面的host和port相信大家都知道,我就不细说了,

autoOpenBrowser是否自动打开浏览器

errorOverlay查询错误

notifyOnErrors通知错误
,poll是跟devserver相关的一个配置,webpack为我们提供的devserver是可以监控文件改动的,但在有些情况下却不能工作,我们可以设置一个轮询(poll)来解决

useEslint是否使用eslint

showEslintErrorsInOverlay是否展示eslint的错误提示

devtool webpack提供的用来方便调试的配置,它有四种模式,可以查看webpack文档了解更多

cacheBusting 一个配合devtool的配置,当给文件名插入新的hash导致清楚缓存时是否生成souce maps,默认在开发环境下为true,不过文档中还写了一句话:“Turning this off can help with source map debugging.”额。。。

cssSourceMap 是否开启cssSourceMap
我们再来看build下的配置内容:
index 编译后index.html的路径,path.resolve(__dirname, '../dist')中

path.resolve(__dirname)指的是index.js所在的绝对路径,再去找“../dist”这个路径(node相关的知识),

assetsRoot打包后的文件根路径,至于assetsSubDirectory和assetsPublicPath跟dev中的一样,

productionSourceMap是否开启source-map,

devtool同dev,

productionGzip是否压缩,

productionGzipExtensions gzip模式下需要压缩的文件的扩展名,设置后会对相应扩展名的文件进行压缩

bundleAnalyzerReport 是否开启打包后的分析报告

截止到这儿,config文件夹下的内容基本上就过完了,正如名字告诉我们的,这三个文件仅仅是写死的配置文件,截止目前还没遇到太多

总结

以上所述是小编给大家介绍的vue-cli配置文件——config篇,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
jQuery封装animate.css的实例
Jan 04 #jQuery
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 #Javascript
浅谈vuex 闲置状态重置方案
Jan 04 #Javascript
详解Angular5 服务端渲染实战
Jan 04 #Javascript
JavaScript中的高级函数
Jan 04 #Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 #Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 #Javascript
You might like
第十三节 对象串行化 [13]
2006/10/09 PHP
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
一个PHP日历程序
2006/12/06 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
AJAX的使用方法详解
2017/04/29 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python中Flask框架简单入门实例
2015/03/21 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
初三学习决心书
2014/03/11 职场文书
倡议书范文
2014/04/16 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书