如何组织由express / koa后端服务的webpacked vue.js应用程序？
我在设置一个易于debuggingvue.js项目与koa服务器结合的一些困难。 命令cross-env NODE_ENV=development webpack-dev-server --open --hot从webpack-simple生成configuration似乎是一件好事，但与koa / express一起使用这个命令的惯例是什么？
我find的一个解决scheme是使用pm2同时启动vue和后端的webpack-dev-server，但是我认为这意味着我需要初始着陆vue.js应用程序页面的复制版本，目前正在从koa路线上/。 对于我来说这两种服务器的想法也是令人困惑的，而且感觉很奇怪。
所以，我想我一定是做错了！ 有人可以解释一个很好的常规方式做到这一点。
如果你想用自己的Node后端来使用webpack-dev-server，那么你需要考虑使用proxy 。
基本上，这个想法是，你在一个端口（例如，端口3000 ）上运行你的webpack-dev-server ，并在另一个端口（例如，端口3001 ）上运行你的节点服务器。 您只需告诉webpack将您的服务器端请求转发到您的Node后端。
您可以通过将proxy属性添加到您的webpack.config.js文件中的devServer设置来执行此操作。 例如：
devServer: { ... proxy: { '/api/**': { target: 'http://localhost:3001', secure: false } } }
现在，以/api/开头的任何请求都会转到您的Node后端。 所以如果你做这样的事情：
fetch('/api/users').then(...)
这个请求将被代理到您的节点服务器。 你只是想确保你所有的服务器端路由前缀/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)