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

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

  •  
  •   black11black · 2020-06-01 16:47:53 +08:00 · 1235 次点击
    这是一个创建于 1396 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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  
       2020-06-01 17:03:24 +08:00
    环境变量 build 时指定不同环境
    lupkcd
        2
    lupkcd  
       2020-06-01 17:36:04 +08:00
    nginx 配置一下
    TomatoYuyuko
        3
    TomatoYuyuko  
       2020-06-01 17:54:54 +08:00
    npm run build:dev
    npm run build:prod
    自己配置
    robinlovemaggie
        4
    robinlovemaggie  
       2020-06-01 17:57:59 +08:00
    devServer 顾名思义就是 dev 环境下的代理,方便开发用的,生产环境必须自行配置域服务器上 API 的后置代理
    rockjike
        5
    rockjike  
       2020-06-01 18:13:36 +08:00
    dev, prod 应该有两套配置
    xuanloe
        6
    xuanloe  
       2020-06-01 18:21:56 +08:00
    vue cli 可以注入环境变量,根据判断是否是开发环境,是开发环境加上 /api
    black11black
        7
    black11black  
    OP
       2020-06-01 19:17:50 +08:00
    @xuanloe
    @rockjike
    @robinlovemaggie
    生产环境如何配置?我的希望就是原服务接口为 /json/get_test,开发的时候能正常工作,编译的时候能把开发的地址自动替换回 /json/get_test 而不是 /api/json/get_test
    noreplay
        8
    noreplay  
       2020-06-02 07:43:48 +08:00 via Android
    Env.development 和 env.production
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3571 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 04:58 · PVG 12:58 · LAX 21:58 · JFK 00:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.