vue3_webpack和vite区分环境打包

webpack版本

1.配置package.json

// 注意，这里 “--mode 名字“ 要和步骤2中文件名“.env.名字”名字保持一致
//  开发运行
serve": "vue-cli-service serve",
//  正式环境
"build": "vue-cli-service build",
// 本地测试
"build:local_test": "vue-cli-service build --mode local_test",
// 远程测试
"build:remote_test": "vue-cli-service build --mode remote_test",
// 压测环境
"build:pressure_test": "vue-cli-service build  --mode pressure_test",

2.新建.env.文件名

// .env.local_test
NODE_ENV = 'alpha'
// 也可以通过VUE_APP定义;
VUE_APP_TITLE = 'productionTest'
VUE_APP_BASEURL = 'http://xxx/api'
// 如果是通过VUE_APP定义的话项目中可以这么获取;
console.log(process.env.VUE_APP_TITLE); // 'productionTest'

3.新建setBaseUrl.ts来返回api-url

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

4.axios调用setBaseUrl

import axios from 'axios'
import baseUrl from './setBaseUrl'
axios.defaults.withCredentials = true;
axios.defaults.baseURL = baseUrl;

vite版本

1.配置package.json

"scripts": {
    "dev": "vite --mode development",
    "test": "vite build --mode test",
    "build": "vite build --mode production",
}

2.新建.env.文件名

// .env.test
VITE_APP_TITLE='test'
VITE_API_URL = 'http://xxx:8080/'

3.获取

const Env = import.meta.env.VITE_APP_TITLE;