Rails 后端和 Vue 前端在同一个端口上

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 开发服务器：代理
• Vue CLI Webpack 配置

---

上述配置适用于开发环境。 生产环境必须以不同方式处理，因为生产中没有 webpack 开发服务器。 You need to build the static HTML/JS/CSS content with webpack and then either put the generated code into the Rails application and serve it from there statically or you use two web servers (one for Rails and one for serving the static files) and在他们面前放一个反向代理。