工欲善其事必先利其器
首先看一下config文件夹下面的prod.env.js文件
我影藏掉的没有用,在这个文件里面的内容很简单,仅仅是导出了一个对象,这个对象指的是"production"(生产环境)
接下来看另一个文件 dev.env.js
同上,影藏掉的没有用,在这个文件里面的内容很简单,仅仅是导出了一个对象,这个对象指的是"development"(开发环境)
这是一种情况,另一种情况里面是什么呢
'use strict'//引入webpack-merge模块const merge = require('webpack-merge')//引入刚才打开的prod.env.jsconst prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"'})
先引入了webpack-merge这个模块。这个模块的作用是来合并两个配置文件对象并生成一个新的配置文件，有点儿类似于es6的object.assign(); (方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。意为合并对象)
vue-cli中将一些统一的配置抽出来放在一个文件中,在不同的环境下执行不同的代码,在打包的时候使用webpack进行合并,减少重复代码,正如文档中所说,“ webpack遵循不重复原则(Don’t repeat yourself - DRY)，不会再不同的环境中配置相同的代码 ”
当然，关于webpack-merge的内容还远不止这些，想了解更多关于这个模块的朋友请访问 /package/webpack-merge
好，让我们接着回到代码中来，引入webpack-merge后这个文件又引入了prod.env.js，接着就将prod.env.js的配置和新的配置，即指明开发环境（development）进行了merge。（我有点儿不太理解为什么要这样做，如果不merge直接写module.exports={NODE_ENV:‘"development’}也是可以的，难道是为了优雅降级？）
还有一点需要注意是的， development和production一定要加双引号，不然会报错！！！
接下来看 index.js这个文件,
// see http://vuejs-templates.github.io/webpack for documentation.// path是node.js的路径模块，用来处理路径统一的问题var path = require("path");// 将此模块下的东西进行导出module.exports = {// 下面是build也就是生产编译环境下的一些配置-----------------生产环境!!!!build: {// 这个是我项目中一个文件,意味将其导入sitEnv: require("./sit.env"),// 导入此文件,这个文件用来指向当前开发的环境prodEnv: require("./prod.env"),// __dirname 总是指向被执行 js 文件的绝对路径 // 这个是相对路径的拼接,当前根目录为 config 而下面的属性值就是 dist/index.htmlindex: path.resolve(__dirname, "../dist/index.html"),// 下面定义的是静态资源的根目录, 也就是打包之后的dist文件assetsRoot: path.resolve(__dirname, "../dist"),// assetsSubDirectory意为 资产子目录 也就是静态资源根目录的子目录 static ,在dist文件下面assetsSubDirectory: "static",// 请根据自己路径配置更改 线上发布的时候一般都会使用nginx反向代理，所以使用./是最靠谱的，但是vue-cli dev 中的 assetsPublicPath不能配置成"./",而build中的却可以配置，并可以正常访问，虽然不影响发布但是影响开发效率。assetsPublicPath: "./",// 下面定义是否生成生产环境的sourcmap，sourcmap是用来debug编译后文件的，通过映射到编译前文件来实现// 将其改为 true 之后 项目打包之后 在 dist文件中会出现很多 .map文件, [详看这个地址](/weixin_43553701/article/details/91804515)productionSourceMap: false,// 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// 上有英文注释bundleAnalyzerReport: process.env.npm_config_report},dev: {// 导入模块,用来指明开发环境env: require("./dev.env"),// 这是 本地项目启用的时候监听的端口号 可自行修改port: 9527,// 项目启动的时候自行打开浏览器 接受一个 布尔值autoOpenBrowser: true,assetsSubDirectory: "static",assetsPublicPath: "/",// 下面是代理表，作用是用来，建一个虚拟api服务器用来代理本机的请求，只能用于开发模式proxyTable: {"/jwt": {target: "http://192.168.2.252:8082",pathRewrite: {"^/jwt": "/jwt"}},"/admin": {// target: "",target: "123",pathRewrite: {"^/api": "/api"}},},// CSS Sourcemaps off by default because relative paths are "buggy"// with this option, according to the CSS-Loader README// (/webpack/css-loader#sourcemaps)// In our experience, they generally work as expected,// just be aware of this issue when enabling this option.cssSourceMap: false}};
