如何在Vue Vite bundler中使用节点服务器

Question

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

vite
vite preview
vite preview --port:5000

谢谢

更新2022年2月8日

我找到了一条路。我们必须在vite构建命令中添加标志-监视，比如：vite build --watch，这样Vite将只绑定到前端的更改，并将其存储在/dist文件夹中，但它会像Nodejs一样监视外部服务器。这样，我们可以同时开发前端和后端文件，并立即看到结果。我们必须单独启动服务器文件并从那里为index.html提供服务。如果我们在服务器端使用Nodejs和Express，那么我们还必须将默认目录指向/dist，因为Vite会将捆绑的文件放在那里，比如app.use(express.static(__dirname + '/dist'));。节点将自动从该文件夹为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()

在doc: https://vitejs.dev/guide/ssr.html#setting-up-the-dev-server中对此进行了解释

更新Vite 2.x

对于Vite 2.x，将server.middlewareMode设置为true，将appType设置为custom

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