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 相关文章推荐
input输入框的自动匹配(原生代码)
Mar 19 Javascript
JavaScript 数组详解
Oct 10 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
让你30分钟快速掌握vue3教程
Oct 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
第十四节--命名空间
2006/11/16 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
浅谈php://filter的妙用
2019/03/05 PHP
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
vue中监听返回键问题
2019/08/28 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Windows下PyMongo下载及安装教程
2015/04/27 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Python的几种主动结束程序方式
2019/11/22 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
应届生面试求职信
2014/07/02 职场文书
学校施工安全责任书
2015/01/29 职场文书
九年级英语教学反思
2016/02/15 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python