技术栈：uniapp的vue3+vite2+ts版本
前言：对开发环境和生产环境进行环境配置，以及打包到生产环境的问题解决（使用vite即通用，不仅限于uni）

一、创建环境文件

在vite.config.ts同级目录下创建.env.development和.env.production，在文件里添加语句，如下，必须以VITE开头才能被识别到，请求地址替换成你自己所需的

VITE_BASE_API = "https://www.bilibili.com"

二、启动项设置

在package.json里找到启动语句，在后面添加–mode [envName]
–mode后development和.env.development中的development为对应关系，如下图；例如：创建文件.env.develtest，则使用启动项设置–mode develtest

三、vite.config.ts中设置代理

在不同版本的vite项目创建中可能会有些小区别，自行修改下即可（注意：每次修改过vite.config.ts都需要重新启动项目才能生效）

import { loadEnv } from "vite";

export default defineConfig(({ command, mode }) => {
  const root = process.cwd();
  const env = loadEnv(mode, root);
  console.log('env', env);
  return {
    plugins: [uni()],
    server: {
      proxy: {
        '/api': {
          target: env.VITE_BASE_API,
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, '') // 将请求中/api用空值替换重写，根据实际业务修改
        },
      }
    }
  }
})

四、进行请求查看是否成功

uni.$u.get(`/api/index/ding.json`).then((res: any) => {
    return res
})

通过代理请求是不会替换请求地址的，但是状态码是200，实际上是请求成功了，也有数据返回了，实际上代理后的请求的路径为https://www.bilibili.com/index/ding.json

五、打包后生产环境的问题解决

proxy一般用于开发环境，正式的生产环境在打包后proxy会失效，我这有两种解决方案，更多的需要大家自行去研究，有了也告诉下我学习下
1.使用nginx做转发
2.在请求的baseurl进行设置
我是在uni项目中使用uview的请求库，如果你是使用axios，只需要把config里的baseURL按下方配置即可（ps：baseUrl的优先级比proxy代理高，如果使用该方式，开发环境中在浏览器的请求也能看到请求地址被替换了）

uni.$u.http.setConfig({
	baseUrl: import.meta.env.VITE_BASE_API, // 设置请求
	dataType: 'json',
	showLoading: true,
	loadingText: '请求中...',
	loadingTime: 800,
	originalData: false,
	loadingMask: true,
	// 配置请求头信息
	header: {
		'content-type': 'application/json;charset=UTF-8'
	},
});

六、参考链接地址

1、主要流程参考：https://blog.csdn.net/snowball_li/article/details/124808431
2、proxy请求代理封装：https://blog.csdn.net/weixin_40013817/article/details/121130845，这个方式我在单位项目里看到过，有被引进过，记录下
3、视频学习地址：https://www.bilibili.com/video/BV1wf4y1P741?spm_id_from=333.1007.top_right_bar_window_history.content.click
4、打包后失效的某些问题参考：https://segmentfault.com/q/1010000020548094?utm_source=tag-newest