javascript - 如何组织由 express/koa 后端服务的 webpacked vue.js 应用程序？

Question

我在结合 koa 服务器设置易于调试的 vue.js 项目时遇到了一些困难。来自 webpack-simple 生成的配置的命令 cross-env NODE_ENV=development webpack-dev-server --open --hot 似乎是一件好事，但是将它与 koa 一起使用的约定是什么/ express ？

我发现的一个解决方案是使用 pm2 同时启动 vue 的 webpack-dev-server 和后端，但我认为这意味着我需要初始登陆 vue.js 应用程序的复制版本我目前从/上的 koa 路线服务的页面。考虑这两个服务器也让我有点困惑，感觉很奇怪。

所以，我想我一定做错了!有人可以解释一个很好的传统方法吗？

Answer 1

如果您尝试将 webpack-dev-server 与您自己的 Node 后端一起使用，您将需要考虑使用 proxy .

基本上，您的想法是在一个端口(例如，端口 3000)上运行您的 webpack-dev-server，并在另一个端口上运行您的 Node 服务器(例如，端口 3001)。您只需要告诉 webpack 将您的服务器端请求转发到您的 Node 后端。

您可以通过将 proxy 属性添加到 webpack.config.js 文件中的 devServer 设置来实现。例如:

devServer: {
  ...
  proxy: {
    '/api/**': {
      target: 'http://localhost:3001',
      secure: false
    }
  }
}

现在，任何以 /api/ 开头的请求都将转到您的 Node 后端。因此，如果您执行以下操作:

fetch('/api/users').then(...)

此请求将被代理到您的 Node 服务器。您只需要确保为所有服务器端路由添加前缀 /api/。

要在 Koa 中自动为所有路由添加前缀，您只需执行以下操作:

const Koa = require('koa')
const Router = require('koa-router')

const app = new Koa()
const router = new Router({ prefix: '/api' })

// GET /api/users
router.get('/users', async ctx => {
  ...
})

app.use(router.routes())
app.use(router.allowedMethods())

如果您使用的是 Express，则可以通过执行以下操作来添加前缀:

const express = require('express')

const app = express()
const router = express.Router()

// GET /api/users
router.get('/users', (req, res) => {
  ...
})

app.use('/api', router)