区分线上环境、测试环境、XX环境打包， 如果有不正确的或者其他建议，请留言说明
一、根据环境变量配置BASE_URL
修改config/prod.env.js文件如下：
'use strict'
// 可配置一个默认的环境prod，这样运行npm run build 默认就是prod的环境
let buildType = process.argv.slice(2)[0] || 'prod'
/**
* 这里是为了把开发环境区分开
* 看一下开发环境的命令："dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
* 具体情况根据自己的命令来，总之区分开开发环境即可，也可以写成"dev": "webpack-dev-server development ......."
*/
if (process.argv.slice(2)[0] == '--inline') return
console.log('------strat build------' + buildType)
let BASE_URL
switch (buildType) {
case 'prod': // 线上环境打包命令 npm run build
BASE_URL = 'https://www.123123.com:10104'
break
case 'test': // 测试环境打包命令 npm run build test
BASE_URL = 'http://192.168.1.189:10425'
break
case 'xxx': // npm run build xxx
BASE_URL = 'https://www.12343.com:10107'
break
default:
BASE_URL = 'https://www.123123.com:10104'
break
}
module.exports = {
NODE_ENV: '"production"',
BASE_URL: JSON.stringify(BASE_URL),// 这里需要转为字符串，不然其他文件中获取会得到变量的形式
}
修改config/dev.env.js文件如下：
"use strict";
if (process.argv.slice(2)[0] != '--inline') return
let BASE_URL = '/api' //本立proxy代理的前缀
console.log('------strat dev------')
module.exports = {
NODE_ENV: '"development"',
BASE_URL: JSON.stringify(BASE_URL)
}
- 关于
process.argv这个变量：
- 第一个元素process.argv[0]——返回启动Node.js进程的可执行文件所在的绝对路径
- 第二个元素process.argv[1]——为当前执行的JavaScript文件路径
- 剩余的元素为其他命令行参数
也就是说，如果我运行npm run build test命令，那么process.argv.slice(2)[0]得到的就是字符串test，前提是我的package.json文件中的命令没有去做其他的更改，如果你是用了其他的插件，请根据情况修改
image.png
-
修改打包时命令行提示
修改build/build.js文件如下：
image.png
// 增加下面这一行
let buildType = process.argv.slice(2)[0];
// spinner修改如下
const spinner = ora("building for " + buildType + "...");
二、获取环境变量前提条件（配置插件）
-
process.env:
process对象是全局变量，它提供当前node.js的有关信息，以及控制当前node.js的有关进程。因为是全局变量，它对于node应用程序是始终可用的，无需require()。
既然process都是一个对象了，env自然是它的一个属性，这个属性返回包含用户环境信息的对象。在终端输入node后，在输入process.env可以看到打印出来的信息。
但是这还不够，process.env是node中的环境变量，在模块中是无法直接拿到的，比如.js、.vue，还需要配置一下DefinePlugin
-
DefinePlugin:
DefinePlugin可以定义一些全局变量，让我们在模块当中直接使用，不用做任何声明。
如下：
webpack.dev.conf.js
plugins: [
...
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
...
]
webpack.prod.conf.js
plugins: [
...
new webpack.DefinePlugin({
'process.env': require('../config/prod.env')
}),
...
]
三、配置项目请求地址（BASE_URL）
到现在为止，我们可以根据打包命令的不同，所配置的
BASE_URL不同， 直接在axios封装文件中获取即可：
const request = axios.create({
baseURL: process.env.BASE_URL
})
在vue文件中使用的获取方式相同
