vue cli3 分环境打包详情步骤

需要注意 2 点：

1、cli2 创建项目生成的 config 文件里的 env 文件是 js 后缀

2、cli3 创建自定义 env 文件的话不需要 js 后缀

打包时线上环境可能分多种，比如测试环境和生产环境等等。

直接上步骤。

一：package.json 添加 “build-test ”build-prod”:

"scripts": {
  "serve": "vue-cli-service serve",
  "build-prod": "vue-cli-service build",
  "build-test": "vue-cli-service build --mode test",
  "lint": "vue-cli-service lint"
},

二：在项目根目录添加文件“.env.test”，其内容：NODE_ENV = ‘test’

<font style="background-color:#FAFAFA;">NODE_ENV = 'test'</font>

三：新建‘setBaseUrl.js’ 文件 用来设置 url，其内容：

// 这里是一个默认的url，可以没有
let baseUrl = "";
switch (process.env.NODE_ENV) {
  case "development":
    baseUrl = "本地的请求url地址"; // 这里是本地的请求url
    break;
  case "test": // 注意这里的名字要和步骤二中设置的环境名字对应起来
    baseUrl = "测试环境中的url地址"; // 这里是测试环境中的url
    break;
  case "production":
    baseUrl = "生产环境url地址"; // 生产环境url
    break;
}

export default baseUrl;

四：在请求中引入设定的 url，我这里用的是 main.js，所以在 main.js 文件中引入并使用

import axios from "axios";
import baseUrl from "./setBaseUrl";

// 是否允许携带cookie
// axios.defaults.withCredentials = true
axios.defaults.baseURL = baseUrl;

五：最后，测试一下是否设置成功

npm run serve 查看 Network 里面的请求地址是否已经变为步骤三里面的地址

别慌，还有一点 vue.config.js 里面的配置，在此处记录一下。

// 输出目录文件名配置
// eslint-disable-next-line no-unused-vars
let outputDir = "qy_new"; // 这里的qy_new是打包出来的文件夹名
if (process.env.NODE_ENV === "production") {
  outputDir += "prod";
} else if (process.env.NODE_ENV === "test") {
  outputDir += "test";
}
module.exports = {
  publicPath: "./",
  // 输出文件目录
  outputDir: outputDir,
  // 生产环境去掉console.log
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
    }
  },
};

方法二 ：根路径下添加以下文件

.env.development (开发环境)代码如下：

VUE_APP_BASE_URL = '[http://www.development.com](http://www.development.com/)'

.env.test(测试环境)代码如下：

VUE_APP_BASE_URL = '[http://www.test.com](http://www.test.com/)'

.env.production(生产环境)代码如下：

VUE_APP_BASE_URL = '[http://www.productioon.com](http://www.productioon.com/)'

最后在代码中  可以使用  process.env.VUE_APP_BASE_URL 获取当前环境得 baseurl