在项目开发中，我们往往需要区分开发版、测试版、pre版、prod版，如果每次打包前都要去修改API地址就太麻烦了，那么如何根据不同的环境打包呢？
1、安装cross-env
npm i --save-dev cross-env
2、修改各环境下的参数
1）在config文件夹下新建pre.env.js和test.env.js文件
2）修改prod.env.js文件的内容
'use strict'
module.exports = {
NODE_ENV: '"prod"',
BASE_URL: '"http://www.aaa.com/prod"' // 这里写生产环境地址
}
3）修改pre.env.js文件的内容
'use strict'
module.exports = {
NODE_ENV: '"pre"',
BASE_URL: '"http://www.aaa.com/pre"' // 这里写预上线环境地址
}
4）修改test.env.js文件内容
'use strict'
module.exports = {
NODE_ENV: '"test"',
BASE_URL: '"http://www.aaa.com/test"' // 这里写测试环境地址
}
5）修改dev.env.js文件内容，让其去合并测试环境的url
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./test.env') // 将此处的./prod.env修改为./test.env
// 合并测试上的，不用写东西
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
6）修改webpack.prod.conf.js文件
将const env = require('../config/prod.env')改为如下：
const nodeEnv = process.env.NODE_ENV
const env = require(`../config/${nodeEnv}.env`)
7）修改build.js文件
将process.env.NODE_ENV = 'production'改为如下：
const nodeEnv = process.env.NODE_ENV
将const spinner = ora(‘production’)改为：
let text = ''
switch (nodeEnv) {
case 'prod' :
text = {
color: 'green',
text: '正在为生产环境打包.......'
}
break;
case 'pre' :
text = {
color: 'blue',
text: '正在为预上线环境打包.......'
}
break;
case 'test' :
text = {
color: 'red',
text: '正在为测试环境打包.......'
}
}
const spinner = ora(text)
8）修改 package.json文件
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev", "lint": "eslint --ext .js,.vue src",
"build:prod": "cross-env NODE_ENV=prod node build/build.js",
"build:dev": "cross-env NODE_ENV=test node build/build.js",
"build:pre": "cross-env NODE_ENV=pre node build/build.js"
},
到此，执行不同的打包命令可以了。
打包配置好之后，还需要对项目进行进一步的优化，如使用CDN资源和gzip压缩
1.使用CDN资源
使用CDN在index.html文件中引入（我用的是BootCDN）
<link href="https://cdn.bootcss.com/element-ui/2.10.1/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.10.1/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
修改build/webpack.base.conf.js文件
module.exports = {
// CDN
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui':'ELEMENT',
'axios':'axios'
}
}
最后将main.js文件中的引入注释掉，个人测试了一下，不注释掉的话，打包体积也是会缩小的，因为打包生产环境时，运行的是webpack.base.conf.js这个文件中的配置，所以不会把CDN引入的那些依赖打包进去（如果不注释掉的话，个人觉得应该保证CDN引入的版本和npm安装的版本号一致，以免生产环境中出现问题不好排错）
2.gzip压缩
vue-cli生成的项目会自动配好相关的设置，只需我们开启就可以了，找到config/index.js文件
productionGzip: true, // 默认是false，改为true
如图：
config/index.js
打开build/webpack.prod.conf.js文件，找到如下图代码，发现如果开启gzip压缩，还需要安装compression-webpack-plugin
build/webpack.prod.conf.js
所以我们来安装下compression-webpack-plugin，直接安装可能会出现版本冲突的报错，建议安装低版本的，执行如下命令：
npm i -D compression-webpack-plugin@1.11.2
到此，前端的gzip配置就完成了，当然还得修改服务器的配置
3. 打包之后出现一些map文件，不想要怎么办？
首先介绍下map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
如果觉得不需要这些map文件，可以找到config/index.js,进行如下修改（看个人项目需要）
productionSourceMap: false // 默认是true
github地址：Avery_G
（注：每一篇文章都会对应有demo，已上传到个人github）
网友评论