1. 文件所在目录
2. public文件夹下创建config.js文件
注意要用var变量，不能用const
var PLATFROM_CONFIG = {
DEV_BASE_URL: 'http://localhost:8080', // 开发环境
PRO_BASE_URL: 'http://10.64.16.180:8083', // 正式环境
}
3. index.html引入config.js文件
注意点:
(1) 切记一定要是js文件，因为打包后的所有文件都是js，而不能是ts，如果是ts的话会报错；
解决：
不能用ts，要用js
(2) 引入路径，在vite中publicDir配置默认public,在开发时我们可以使用/开头直接访问public 目录下的资源
<script src="/config.js" type="text/javascript"></script>
<script type="module" src="/src/main.ts"></script>
4. 引入全局变量
onsole.log(import.meta.env, window.PLATFROM_CONFIG, 'window.PLATFROM_CONFIG')
const baseUrl =
import.meta.env.MODE === 'production' ? window.PLATFROM_CONFIG.PRO_BASE_URL : window.PLATFROM_CONFIG.DEV_BASE_URL
const config = {
// 默认地址请求地址，可在 .env.** 文件中修改
// baseURL: import.meta.env.VITE_API_BASE_URL as string,
baseURL: (baseUrl + import.meta.env.VITE_APP_API) as string,
// 设置超时时间
timeout: ResultEnum.TIMEOUT as number,
// 跨域时候允许携带凭证
// withCredentials: true
}
注意点：
(1) 生产环境在config.js中配置
(2) 测试环境还是走原先的思路，代理请求
const baseUrl =
import.meta.env.MODE === 'production'
? window.PLATFROM_CONFIG.PRO_BASE_URL + import.meta.env.VITE_APP_API
: import.meta.env.VITE_API_BASE_URL
const config = {
// 默认地址请求地址，可在 .env.** 和 config.js 文件中修改
baseURL: baseUrl,
}
(3) .env.development
VITE_API_BASE_URL = /Web
(4) vite.config.ts
proxy: {
'/mock': {
target: 'http://127.0.0.1:4523/m1/3915073-0-default/mock',
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(/^/mock/, ''),
},
'/Web': {
//设置开发环境代理
// target: 'http://10.158.27.179:8080/Web', //代理的目标地址(后端设置的端口号)
target: 'http://127.0.0.1:4523/m1/4089913-0-default/Web',
changeOrigin: true,
rewrite: (path) => path.replace(/^/Web/, ''),
},
},
5. 打包后的目录
6. 如何实时修改全局config配置
（1）打开config.js文件
（2）修改PRO_BASE_URL参数，直接保存，重新输入启动命令
7. vue打包好的dist如何在本地运行
8. TS项目需要设置全局ts
类型“Window & typeof globalThis”上不存在属性“PLATFROM_CONFIG”。
declare interface Window {
PLATFROM_CONFIG: any
}
参考文献：
