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

[shuyunquan]

最近开发一个前后端分离的 web 项目

我又写后端 api 又写前端页面(前端不精通), 还有一个专业的前端同事配合我专门写前端页面. 现在有个问题有些麻烦,想看看大家是怎么解决的

写完后端 API 发布测试环境,.env.development文件写上测试环境 api 地址,我这边体验不是很好 每次开发完 api 本地测测发布到测试环境,再调试前端,缺这个哪个再改 api 再发

我负责开发的页面更希望.env.development文件直连我的本地 api 地址,这样开发调试都很方便, 但是经常忘记,每次提交代码都把.env.development文件提交上去了,导致前端同事那边连不上 api

把.env.development文件忽略是可以 但是感觉这样不是正确的做法

注: 问: 为什么不一次性把 api 写完善了直接发布测试环境, 不要改来改去的? 答: 这个项目没有明确的需求, 是我自己想需求, 做出来后,试用后反馈给我问题再改

[Features]

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

[xiaogu2014]

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

[Kusoku]

用 .env.local

[sagaxu]

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

[czkm1320]

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

[czkm1320]

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

[bojackhorseman]

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

[webszy]

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

[wunonglin]

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

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

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


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

[78786381]

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

[Cheesen]

多年开发经验建议不要用 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],
},
},
},
})
}



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

[Immortal]

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

[realpg]

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

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

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

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

[evada]

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

[lizhien]

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

[1024potato]

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