vue项目多项目打包环境配置

不知大家是否因需要打包发布多域名的包而切换分支苦恼不已

最近公司的后台项目有多个域名，每个域名需要放不同的请求地址，那么打包的时候不能等着一个一个打包吧，这样做非常浪费时间。

因此配置了一些开发运行环境.env文件的不同，搭配package.json文件的不同打包命令，访问各自的运行环境文件，可以实现同时打包多个不同请求地址的包，是不是很方便非常奈斯。

首先需要配置env文件，文件名为 `.env.prod**`，根据需要自定义后面的名字

VUE_APP_TITLE= "网站标题"
VUE_APP_BASE_API= "http://www.baidu.com/admin " //请求域名
NODE_ENV= production
outputDir= dist/dist** // 输出目录
VUE_APP_MODE= production
ENV= production
VUE_APP_PORT= 5000

注意： 

        在env文件中配置项的自定义变量需要以`VUE_APP_`开头，不然打包时会被忽略而不生效。

修改package.json文件中的打包命令，使用npm run build:**，自定义`**`，--mode后面对应的env文件后面自定义的名字。

"scripts": {
    "dev": "vue-cli-service serve",
    "build:**": "vue-cli-service build --mode prod**"
  }

---

使用方法：

在封装的公共请求方法中使用配置中的请求地址

const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API,
  baseURL: process.env.NODE_ENV === "production" ? process.env.VUE_APP_BASE_API : baseURL,
  // 超时
  timeout: 10000,
  // 跨域请求时是否需要使用凭证
  withCredentials: false,
});

举一反三 ，可以配置n个不同运行环境的打包方法，并可以在vscode终端同时运行，不需等待一个接一个的打包，增加摸🐟时间。skr~