关于 Vue 框架创建项目后， build 项目时如何无缝对接后端接口的问题
black11black · 2020-06-01 16:47:53 +08:00 · 1331 次点击这是一个创建于 1670 天前的主题，其中的信息可能已经有所发展或是发生改变。
vue-cli4 项目，我目前已经有一个功能完整后端，不是 node 写的，然后想用 vue 构建前端。所以我在更新代码的时候是这样的感觉：后端运行在 127.0.0.1:8081，前端用 vue-cli 的 serve 功能跑在 127.0.0.1:8080，在 vue 的配置文件中加了这么一段：
module.exports = {
devServer:{
host:'0.0.0.0',
proxy:{
"/api":{
target:"http://127.0.0.1:8081",
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
}
},
}
这样设置之后假如我有一个后端接口地址是 127.0.0.1:8081/json/get_test
在 vue 之中我只需要写成 src="/api/json/get_test"，就可以正常使用接口功能，并且自动解决跨域问题。
然后问题来了，现在项目写完了，我要 build 并且拿到其他语言的引擎里去跑。运行 npm run build 之后所有的请求地址仍然保持原样，反倒没法接上接口了
这种情况该怎么配置呢？
 |
1
baiyi 2020-06-01 17:03:24 +08:00
环境变量 build 时指定不同环境
|
 |
2
lupkcd 2020-06-01 17:36:04 +08:00
nginx 配置一下
|
 |
3
TomatoYuyuko 2020-06-01 17:54:54 +08:00
npm run build:dev
npm run build:prod 自己配置 |
 |
4
robinlovemaggie 2020-06-01 17:57:59 +08:00
devServer 顾名思义就是 dev 环境下的代理，方便开发用的，生产环境必须自行配置域服务器上 API 的后置代理
|
 |
5
rockjike 2020-06-01 18:13:36 +08:00
dev, prod 应该有两套配置
|
 |
6
xuanloe 2020-06-01 18:21:56 +08:00
vue cli 可以注入环境变量，根据判断是否是开发环境，是开发环境加上 /api
|
 |
7
black11black OP @xuanloe
@rockjike @robinlovemaggie 生产环境如何配置？我的希望就是原服务接口为 /json/get_test，开发的时候能正常工作，编译的时候能把开发的地址自动替换回 /json/get_test 而不是 /api/json/get_test |
 |
8
noreplay 2020-06-02 07:43:48 +08:00 via Android
Env.development 和 env.production
|
Select Language