vue3_webpack和vite区分环境打包

webpack版本

1.配置package.json

js // 注意，这里 “--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.文件名

js // .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

js 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

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

vite版本

1.配置package.json

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

2.新建.env.文件名

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

3.获取

js const Env = import.meta.env.VITE_APP_TITLE;