如何将节点服务器与 Vue Vite 捆绑器一起使用答案

【问题标题】：How to use node server with Vue Vite bundler如何将节点服务器与 Vue Vite 捆绑器一起使用
【发布时间】：2021-09-26 21:38:18
【问题描述】：

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

vite
vite preview
vite preview --port:5000

谢谢

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

【问题讨论】：

你为什么想要那个？内置开发服务器有问题吗？是否要部署应用程序？
@LielFridman 我想同时开发前端代码和后端服务器代码并查看所有代码更改。

标签： vue.js bundler vite

【解决方案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

【讨论】：