vue根据不同命令打出不同环境的包

一、vue3.x

1.配置全局环境变量：
　　在项目根目录创建配置文件：.env、.env.development、.env.production、.env.test

　　说明：
　　.env 无论开发环境还是生成环境都会加载这个文件
　　.env.development 开发环境自动加载这个文件
　　.env.production 生成环境自动加载这个文件
此外，env 文件需要声明运行的环境，且定义变量需要以 VUE_APP_ 作为前缀。

.env.development文件：

//.env.development
NODE_ENV = development
VUE_APP_BASE_URL = http://dev.myhost.com

.env.production文件：

//.env.production
NODE_ENV = production
VUE_APP_BASE_URL = http://myhost.com

.env.test文件：

//.env.test
NODE_ENV = test
VUE_APP_BASE_URL = http://test.myhost.com

2.配置package.json来启动不同的命令

"scripts": {
    "dev": "vue-cli-service serve",//默认加载.env.development
    "test": "vue-cli-service serve --mode test",//加载.env.test
    "pro": "vue-cli-service serve --mode production",//加载.env.production
　　 "build": "vue-cli-service build",//默认加载.env.production
    "build:dev": "vue-cli-service build --mode dev",//加载.env.development
    "build:test": "vue-cli-service build --mode test",//加载.env.test
},

二、vue2.x

1.项目安装cross-env。cross-env是node的一个设置和使用环境变量的脚本：npm install cross-env -D

2.在根目录的package.json文件中，把scripts对象的build字段的值改为以下代码。

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "cross-env env_config=prod node build/build.js",
    "build:test": "cross-env env_config=test node build/build.js",
    "build:pre": "cross-env env_config=pre node build/build.js"
},

代码说明：我们使用了cross-env脚本，新增了一个全局变量：env_config。后面根据这个全局变量的值，调用不同开发环境的变量值。调用方式：process.env.env_config。

3，修改控制台提示语句：在根目录的build/build.js文件内找到const spinner = ora('building for production...')这行代码，将其改为const spinner = ora('正在打'+process.env.env_config+'环境包...')，方便打包的时候知道正在打哪个环境的包。

4.在根目录的/config/prod.env.js文件内，为不同环境创建不同变量值。

'use strict'
module.exports = {
  prod: {
    NODE_ENV: '"production"',
    API_URL: '"生产环境接口url访问地址"'
  },
  test: {
    NODE_ENV: '"test"',
    API_URL: '"测试环境接口url访问地址"'
  },
  pre: {
    NODE_ENV: '"pre"',
    API_URL: '"预发布环境接口url访问地址"'
  },
}

5.修改.env的访问地址，以调用对应环境的变量，在根目录的/build/webpack.prod.conf.js文件内找到

//找到以下代码
new webpack.DefinePlugin({
  'process.env': env
})
//修改为如下，不再直接访问.env，而是访问.env下对应环境变量名的变量值
new webpack.DefinePlugin({
  'process.env': env[process.env.env_config]
})

vue2.x根据不同命令打出不同环境的包就完成了，接下来打包即可。

三、其它方式

其实也可以直接通过判断当前域名，改变全局变量的值，能实现一个dist包适应多个开发环境。代码示例：

//在全局js文件中，创建全局变量，之后直接引用即可
// 域名常量
const _const = {
  apiUrl: '生产环境服务器接口地址'
}
// 通过域名判断当前环境
if(location.host === '测试环境域名' || location.host.indexOf('localhost')>-1) {
  _const.apiUrl = '测试环境服务器接口地址';// 测试环境服务器接口地址
}
if(location.host === '预发布环境域名') {
  _const.apiUrl = '预发布环境服务器接口地址';// 预发布环境服务器接口地址
}

export default {
  _const: _const
}

这个写法不太符合代码规范，以后接手你代码的人会一头雾水，他在.env文件中会找不到开发环境的变量。所以需要在.env文件中写上注释：

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  // API_ROOT: '',//域名url等作为常量，存放于根目录该文件下：src/util/common.js。第1行
}