vue-cli 分环境打包 附加打包时间

前言

在开发项目的时候，调用后端接口难免遇到要切换各种环境的情况，比如开发联调后端开发，联调测试，联调线上，打包测试，打包正式等等，每次切换都需要切换不同的请求服务地址，手动改来改去比较麻烦，那么能否通过一条命令就能自动切换环境，答案是可以的，本次着重解决这个问题。

适用环境配置

vue-cli:3.x、4.x

步骤

首先配置 项目根目录下的package.json文件的scripts，在运行命令后面添加 --mode dev  ，可以根据需要自定义运行环境名称 

--mode 环境名，我添加了以下几个环境 dev开发环境，test打包测试环境，production打包正式环境

"scripts": {
    "serve": "vue-cli-service serve --open --mode dev",
    "build:test": "vue-cli-service build --mode test",
    "build:production": "vue-cli-service build --mode production"
  },

在项目根目录下添加对应名称的环境配置文件格式：  .env.环境名

.env.dev 文件内容如下：

NODE_ENV = development                               // 运行环境
VUE_APP_REQUEST_URL = ''                             // 请求服务地址
VUE_APP_FILE_URL = 'http://192.168.1.27:8080/'       // 文件上传、下载地址
VUE_APP_PROXY_URL = 'http://192.168.1.48:8080'       // 开发代理请求地址
VUE_APP_WEBSOCKET_URL = 'ws://192.168.1.48:8081/ws/' // websocket 服务地址
PUBLIC_PATH = '/'                                    // 项目部署目录 用于vue-router 配置中的baseUrl

.env.production文件内容如下：

NODE_ENV = 'production'
VUE_APP_FILE_URL = '/fileDownload/'
VUE_APP_REQUEST_URL = ''
VUE_APP_OUTPUT_NAME = 'build_production'       // 输出文件名称
PUBLIC_PATH = '/'
VUE_APP_WEBSOCKET_URL = 'ws://xx.xx.com/ws/'

.env.test文件内容如下：

NODE_ENV = 'production'
VUE_APP_FILE_URL = '/fileDownload/'
VUE_APP_REQUEST_URL = ''
VUE_APP_OUTPUT_NAME = 'build_test'       // 输出文件名称
PUBLIC_PATH = '/'
VUE_APP_WEBSOCKET_URL = 'ws://xx.xx.com/ws/'

解释一下：

NODE_ENV 是webpack中的运行模式，这里只能设置 development 、production、none，一般开发用前两个值即可

PUBLIC_PATH 是打包后要部署的目录，如果是部署在域名根目录就用 “/”，如果不是那需要根据部署的目录进行更改；比如部署在http://test.com/，这样的是部署根目录用“/”即可，如果是非根目录http://test.com/myapp/，那么就改成“/myapp/”，其应用到vue.config.js中的publicPath 或者vue-router配置项的baseUrl，二选一即可。

module.exports = {
//省略其他配置
   publicPath: process.env.PUBLIC_PATH,

}

注意：其余所有定义变量要以 VUE_APP_ 开头，否则是不能生效的

接下来就是使用定义好的变量。

 VUE_APP_REQUEST_URL 应用到axios 的baseURL，通过nodejs的 process.env.VUE_APP_REQUEST_URL 获取配置文件的变量值。

axios.defaults.baseURL = process.env.VUE_APP_REQUEST_URL

vue.config.js文件的跨域代理

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        changeOrigin: true,
        target: process.env.VUE_APP_PROXY_URL  // 代理地址
      },
      '/': {
        ws: true,
        target: process.env.VUE_APP_WEBSOCKET_URL //websocket 地址
      }
    }
  },
}

VUE_APP_OUTPUT_NAME 应用到vue.config.js文件中的outputDir，同时使用moment插件获取打包时间，与输出的文件夹名称拼接起来，将不同环境的代码打包到不同文件夹下，

module.exports = {
//省略其他配置
    outputDir: `dist/${process.env.VUE_APP_OUTPUT_NAME}_${moment().format('MMDDhhmm')}`,

}

至此，分环境打包到不同文件下已经配置完成，这里只做抛砖引玉，可根据需要自行配置。

总结

1.利用不同的打包命令 --mode 加不同配置文件，以满足区分不同环境测需求

2.通过nodejs的 process.env获取配置文件的变量，应用到项目当中

THE END