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的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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的一些小问题
2010/07/03 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
JavaScript 中的replace方法说明
2007/04/13 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
python下载文件时显示下载进度的方法
2015/04/02 Python
Flask数据库迁移简单介绍
2017/10/24 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
企业项目策划书
2014/01/11 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
大学军训决心书
2015/02/05 职场文书
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle