如何使用节点服务器与Vue Vite捆绑器

Question

有人知道如何在端口3000上使用Nodejs服务器而不是Vite自己的前端开发服务器吗?我尝试了下面所有的命令组合，但没有成功

vite
vite preview
vite preview --port:5000

感谢2022年2月8日更新我已经找到了一个方法。我们必须在vite构建命令中添加flag -watch，如:vite build --watch这样，vite将只将更改捆绑到前端并将其存储在/dist文件夹中，但它将监视外部服务器，如Nodejs。这样我们就可以同时开发前端和后端文件，并立即看到结果。我们必须单独启动服务器文件，并从那里提供index.html。如果我们在服务器端使用Nodejs和Express，我们也必须将默认目录指向/dist，因为Vite会将捆绑文件放在那里，如app.use(express.static(__dirname + '/dist'));。node将自动从该文件夹中提供index.html和其他捆绑文件。

Answer 1

基本上您将在服务器选项上设置middlewareMode为ssr:

const fs = require('fs')
const path = require('path')
const express = require('express')
const { createServer: createViteServer } = require('vite')
async function createServer() {
const app = express()
// Create Vite server in middleware mode. This disables Vite's own HTML
// serving logic and let the parent server take control.
//
// If you want to use Vite's own HTML serving logic (using Vite as
// a development middleware), using 'html' instead.
const vite = await createViteServer({
server: { middlewareMode: 'ssr' }
})
// use vite's connect instance as middleware
app.use(vite.middlewares)
app.use('*', async (req, res) => {
// serve index.html - we will tackle this next
})
app.listen(3000)
}
createServer()

这在文档中有解释:https://vitejs.dev/guide/ssr.html setting-up-the-dev-server

更新Vite 2.x

For Vitex setserver.middlewareModetotrueandappTypetocustom:

// ...
const vite = await createViteServer({
server: { middlewareMode: true },
appType: 'custom'
})

Answer 2

参见下面的例子:https://github.com/frameable/vite-vue-express-example

这种方式支持开发中的HMR实时更新，并且在单个节点进程中运行，因此您不需要分别协调后端和开发服务器。