如何组织由express/koa后端提供的webpacked vue.js应用程序？

我在设置一个易于调试vue.js项目与koa服务器结合时遇到了一些困难。来自webpack-simple生成配置的命令cross-env NODE_ENV=development webpack-dev-server --open --hot似乎是一件好事，但与koa/express一起使用该协议的惯例是什么？如何组织由express/koa后端提供的webpacked vue.js应用程序？

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

所以，我想我一定是做错了！有人可以解释一个很好的常规方式来做到这一点。

来源

2017-06-28 ｌｉｌａｈ

如果您尝试将webpack-dev-server与自己的Node后端一起使用，那么您需要使用proxy进行调查。

基本上，这个想法是您在webpack-dev-server一个端口上运行（例如，端口3000）和你的另一端口上运行的节点服务器（例如，端口3001）。您只需告诉webpack将您的服务器端请求转发到您的Node后端。

您可以通过在你的webpack.config.js添加proxy属性的devServer设置文件做到这一点。例如：

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

现在，任何以/api/开头的请求都会转到您的Node后端。所以，如果你做这样的事情：

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

这个请求将被代理到您的节点服务器。你只需要确保你在/api/前加上所有的服务器端路由。

要自动前缀兴亚所有的路线，你可以做到以下几点：

const express = require('express') 

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

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

app.use('/api', router)

：

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())

如果您使用快递，您可以通过以下前缀

来源

2017-06-29 00:13:32 saadq

如何组织由express/koa后端提供的webpacked vue.js应用程序？

回答

相关问题