客户管理系统开发定制vue3+vite2中多环境配置及请求代理（proxy）

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

一、创建环境文件

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

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

二、启动项设置

在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用空值替换重写，根据实际业务修改        },      }    }  }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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

通过代理请求是不会替换请求地址的，但是状态码是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
2
3
4
5
6
7
8
9
10
11
12
13

六、参考链接地址

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