vue-cli脚手架config目录下index.js配置文件的方法


Posted in Javascript onMarch 13, 2018

此文章介绍vue-cli脚手架config目录下index.js配置文件

1、此配置文件是用来定义开发环境和生产环境中所需要的参数

2、关于注释

当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看

3、上代码

// see http://vuejs-templates.github.io/webpack for documentation.
// path是node.js的路径模块,用来处理路径统一的问题
var path = require('path')

module.exports = {
 // 下面是build也就是生产编译环境下的一些配置
 build: {
  // 导入prod.env.js配置文件,只要用来指定当前环境,详细见(1)
  env: require('./prod.env'),
  // 下面是相对路径的拼接,假如当前跟目录是config,那么下面配置的index属性的属性值就是dist/index.html
  index: path.resolve(__dirname, '../dist/index.html'),
  // 下面定义的是静态资源的根目录 也就是dist目录
  assetsRoot: path.resolve(__dirname, '../dist'),
  // 下面定义的是静态资源根目录的子目录static,也就是dist目录下面的static
  assetsSubDirectory: 'static',
  // 下面定义的是静态资源的公开路径,也就是真正的引用路径
  assetsPublicPath: '/',
  // 下面定义是否生成生产环境的sourcmap,sourcmap是用来debug编译后文件的,通过映射到编译前文件来实现
  productionSourceMap: true,
  // 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
  // 下面是是否在生产环境中压缩代码,如果要压缩必须安装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
  // 下面是用来开启编译完成后的报告,可以通过设置值为true和false来开启或关闭
  // 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量,可以自行设置
  bundleAnalyzerReport: process.env.npm_config_report
 },
 dev: {
  // 引入当前目录下的dev.env.js,用来指明开发环境,详见(2)
  env: require('./dev.env'),
  // 下面是dev-server的端口号,可以自行更改
  port: 8080,
  // 下面表示是否自定代开浏览器
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  // 下面是代理表,作用是用来,建一个虚拟api服务器用来代理本机的请求,只能用于开发模式
  // 详见(3)
  proxyTable: {},
  // 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.
  // 是否生成css,map文件,上面这段英文就是说使用这个cssmap可能存在问题,但是按照经验,问题不大,可以使用
  // 给人觉得没必要用这个,css出了问题,直接控制台不就完事了
  cssSourceMap: false
 }
}

注释

(1)下面是prod.env.js的配置内容

module.exports = {
  // 作用很明显,就是导出一个对象,NODE_ENV是一个环境变量,指定production环境
  NODE_ENV: '"production"'
 }

(2)下面是dev.env.js的配置内容

// 首先引入的是webpack的merge插件,该插件是用来合并对象,也就是配置文件用的,相同的选项会被覆盖,至于这里为什么多次一举,可能另有他图吧
 var merge = require('webpack-merge')
 // 导入prod.env.js配置文件
 var prodEnv = require('./prod.env')
 // 将两个配置对象合并,最终结果是 NODE_ENV: '"development"'
 module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
 })

(3)下面是proxyTable的一般用法

vue-cli使用这个功能是借助http-proxy-middleware插件,一般解决跨域请求api

proxyTable: {
  '/list': {
   target: 'http://api.xxxxxxxx.com', -> 目标url地址
   changeOrigin: true, -> 指示是否跨域
   pathRewrite: {
   '^/list': '/list' -> 可以使用 /list 等价于 api.xxxxxxxx.com/list
   }
  }
 }

以上这篇vue-cli脚手架config目录下index.js配置文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 #Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 #Javascript
解决vue-cli创建项目的loader问题
Mar 13 #Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 #Javascript
基于vue.js实现的分页
Mar 13 #Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 #Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 #Javascript
You might like
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
解决uWSGI的编码问题详解
2017/03/24 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
EJB的激活机制
2013/10/25 面试题
问卷调查计划书
2014/01/10 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js