首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
black11black
V2EX  ›  问与答

关于 Vue 框架创建项目后, build 项目时如何无缝对接后端接口的问题

  •  
  •   black11black · 35 天前 · 536 次点击
    这是一个创建于 35 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 之后所有的请求地址仍然保持原样,反倒没法接上接口了

    这种情况该怎么配置呢?

    8 条回复    2020-06-02 07:43:48 +08:00
    baiyi
        1
    baiyi   35 天前
    环境变量 build 时指定不同环境
    lupkcd
        2
    lupkcd   35 天前
    nginx 配置一下
    TomatoYuyuko
        3
    TomatoYuyuko   35 天前
    npm run build:dev
    npm run build:prod
    自己配置
    robinlovemaggie
        4
    robinlovemaggie   35 天前
    devServer 顾名思义就是 dev 环境下的代理,方便开发用的,生产环境必须自行配置域服务器上 API 的后置代理
    rockjike
        5
    rockjike   35 天前
    dev, prod 应该有两套配置
    xuanloe
        6
    xuanloe   35 天前
    vue cli 可以注入环境变量,根据判断是否是开发环境,是开发环境加上 /api
    black11black
        7
    black11black   35 天前
    @xuanloe
    @rockjike
    @robinlovemaggie
    生产环境如何配置?我的希望就是原服务接口为 /json/get_test,开发的时候能正常工作,编译的时候能把开发的地址自动替换回 /json/get_test 而不是 /api/json/get_test
    noreplay
        8
    noreplay   35 天前 via Android
    Env.development 和 env.production
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2002 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:05 · PVG 08:05 · LAX 17:05 · JFK 20:05
    ♥ Do have faith in what you're doing.