vue项目分环境进行打包

vue项目分环境进行打包

第一步在package.json中打包命令：

{
  "name": "int",//项目名称
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    //打包配置 在这个位置添加新的打包命令
    //如：
    //新配置的测试环境，自定义命名"build:prod": "vue-cli-service build --mode prod",
    //新配置的正式环境，自定义命名"build:stage": "vue-cli-service build --mode stage",
    //原来的"build": "vue-cli-service --mode build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.25.0",
    "core-js": "^3.6.5",
    "crypto-js": "^4.1.1",
    "element-china-area-data": "^5.0.2",
    "element-ui": "^2.4.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

第二步在项目根目录添加文件“.env.prod”和“.env.stage”，注意第二步的文件名.env.名字,这个是和第一步的--mode 名字 是一致的。

文件.env.prod

NODE_ENV = 'production'
VUE_APP_BASE_URL = '填写正式环境公共接口'

文件 .env.stage


NODE_ENV = 'stage'
VUE_APP_BASE_URL = '填写测试环境公共接口'

第三步在页面编写接口的时候可以这样处理

let baseurl = process.env.VUE_APP_BASE_URL||"填写本地使用";
      const url = `${baseurl}填写模板字符串拼接path`;
      var params = {
        //参数值
      };
       this.axios.get(url,{params}).then((res) => {


      }).catch((err) => {
        console.info(err);
      }); 
    },

最好是在axios创建实例的时候，为其统一处理baseUrl
// VUE_APP_BASE_URL可以在dev,test,product对应的.env文件设置不同的地址

const ajax = axios.create({
  baseUrl: process.env.VUE_APP_BASE_URL
})

转自：https://blog.csdn.net/weixin_46902217/article/details/123915684