Question

我有这个 rails 应用程序，它处理应用程序的后端，我在同一目录的根目录中还有一个 Vue 项目作为前端。现在，rails 服务器默认运行在端口：3000，Vue 运行在端口：8081。

我需要确保两者都通过一个端口进行通信。

Answer 1

如果您使用 webpack 或 Vue CLI，您可以在前端项目的配置中轻松定义反向代理。下面是这样一个 webpack 配置的例子：

devServer: {
  proxy: {
    '/api': 'http://localhost:3000'
  }
}

定义此类配置时，您的前端开发服务器会将每个请求从 http://localhost:8081/api/* 重定向到 http://localhost:3000/api/*。您还可以根据需要定义除 /api 之外的其他模式。

在 Vue CLI 中，您可以使用相同的配置并将其添加到 vue.config.js 文件中。确保将 webpackConfig 添加到 configureWebpack:

部分

module.exports = {
  configureWebpack: {
     [...the config like above...]
  }
};

以下是一些文档参考：

上述配置适用于开发环境。生产环境必须以不同方式处理，因为生产环境中没有 webpack devserver。您需要使用 webpack 构建静态 HTML/JS/CSS 内容，然后将生成的代码放入 Rails 应用程序并从那里静态地提供它，或者您使用两个 Web 服务器（一个用于 Rails，另一个用于提供静态文件）和在他们面前放一个反向代理。

同一端口上的 Rails 后端和 Vue 前端

1 个答案: