vue打包不同环境下使用接口不同配置

1.需要在vue跟目录下创建.evn.test文件(打包测试环境下接口) 注意：默认打包为线上环境

NODE_ENV = 'test' //设置测试打包

2.需要到package.json配置测试环境打包指令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",  //默认为线上打包
    "test": "vue-cli-service build --mode test",  //用于测试用打包
    "lint": "vue-cli-service lint"
  },

3.对接口地址进行处理

//我创建名BaseUrl.js文件

let BASE_URL = ""; //设置接口地址

switch (process.env.NODE_ENV) {

  case "development":

    BASE_URL = "本地测试";

    break;

  case "test":

    BASE_URL = "测试";

    break;

  case "production":

    BASE_URL = "线上";

    break;

}

export default BASE_URL;

4.对环境不同打包名重新定义

//我使用vue3，要更改打包文件名需要创建vue.config.js文件，文件名必须为vue.config.js

module.exports = {

  outputDir: process.env.NODE_ENV === "development" ? "dist" : "testdist"

};

5.需要在本地测试打开打包文件dist

1. 全局安装：npm install serve -g
2. 运行打包文件: serve -s 打包文件名