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 相关文章推荐
jquery uaMatch源代码
Feb 14 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
PHP经典面试题集锦
2015/03/19 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
JS查看对象功能代码
2008/04/25 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
Python functools模块学习总结
2015/05/09 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
Python函数和模块的使用总结
2019/05/20 Python
python的命名规则知识点总结
2019/10/04 Python
django列表筛选功能的实现代码
2020/03/27 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
详解python logging日志传输
2020/07/01 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
公司接待方案
2014/03/08 职场文书
奥林匹克的口号
2014/06/13 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers