前后端协作开发遇到的 api 地址问题

后端测试机器放到云端或者局域网中立的机器上面
用 remote 手段进行开发

1. 一般会有 local.yaml 文件来保存本地的允许配置。这部分是不推到 git 上面的。
2. 测试环境只有一个的话。不建议反复该来改去发布当本地环境来用哦。

用 .env.local

本地：.env.local
开发环境：.env.dev
测试环境：.env.test
预发环境：.env.pre
线上：.env[.prod]

npm run dev
和 npm run dev-test
2 边可以配置不同的地址 这样你就可以一个地址是本地 一个是线上了

@czkm1320 #5 可以看楼上 差不多的意思 可以配置多个 env 然后启动命令的时候配置

https://cn.vite.dev/guide/env-and-mode.html#env-files

新建一个.env.local,然后你配置一个新的启动命令，读取这个配置文件就行了，这样你和另一个前端都互不影响了

不盲猜，你写的是 PHP😁，不是我吃粑粑。

在盲猜你写的是 vue 。以 vue3 为例在你本地的创建一个带.local 的环境变量即可

https://cn.vite.dev/guide/env-and-mode.html#env-files


以我们举例，正常的前端项目应该有这几个环境变量
.env.dev
.env.sit
.env.uat
.env.prod

不想走这些了就走一遍 nginx 代理，修改本地 host

多年开发经验建议不要用 env 来配置后端接口，一前端对一后还好，多对多就麻烦了。如果其他前端没有.env.local ，启动时可能会报错或者无法启动，如果写在.env.development 并且提交上去，那么必然会有冲突的几率。

以下是我的用法，仅供参考，前提是用 vite 。

修改 vite.config.ts 文件:

import { defineConfig } from 'vite'
import type { ConfigEnv, UserConfigExport } from 'vite'
// 添加 @inquirer/prompts 插件用于启动时做选择。
import { select } from '@inquirer/prompts'

export default async ({ command }: ConfigEnv): Promise<UserConfigExport> => {
let proxyTarget = 'test'

const servers: {
[propName: string]: string
} = {
test: 'https://测试域名',
prod: 'https://生产域名',
张三: 'http://局域网 ip:端口',
李四: 'http://局域网 ip:端口',
王五: 'http://局域网 ip:端口',
}
if (command === 'serve') {
proxyTarget = await select({
message: '请选择后端接口地址',
choices: Object.entries(servers).map(([key, value]) => ({
name: `${key} - ${value}`,
value: key,
})),
})
}

return defineConfig({
server: {
proxy: {
'/api': {
target: servers[proxyTarget],
},
},
},
})
}



这样一来，其他前端在启动项目的时候，可以自己选择指向任何后端接口。

你们就 2 个人搞这些不是折腾自己么
直接连你电脑的 API 就行了,如果人多再考虑规范的事情

这种我更推荐配置找现成的轮子 实现好 "shell 的环境变量 环境变量文件" 的优先级顺序和忽略规则

shell 的环境变量优先于.env.dev

版本库中忽略 .env.dev 和 .env.release

但是版本库中放:
.env.dev.sample 和.env.release.sample 以便标注各个环境所需变量 并在 .env.dev.sample 中添加大量注释 备注好从系统环境变量读取优先级大于本文件的说明

https://ngrok.com/ 可以把你的服务暴露在公网，直接连你本地测试

.env 的回答有了
git 可以临时忽略文件的，仅对自己有效
git update-index --assume-unchanged

还有一种防范： 使用 SwitchHosts 修改 host 文件，测试环境域名指向本机 ip