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

【问题标题】：Rails Back-end and Vue Front-end on a same portRails 后端和 Vue 前端在同一个端口上
【发布时间】：2021-05-22 07:36:03
【问题描述】：

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

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

【问题讨论】：

标签： ruby-on-rails vue.js

【解决方案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 开发服务器。您需要使用 webpack 构建静态 HTML/JS/CSS 内容，然后将生成的代码放入 Rails 应用程序并从那里静态提供它，或者您使用两台 Web 服务器（一台用于 Rails，一台用于提供静态文件）和在他们面前放一个反向代理。

【讨论】：