如何将节点服务器与Vue Vite Bundler配合使用

a11xaf1n  于 2023-03-13  发布在  Vue.js
关注(0)|答案(2)|浏览(126)

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

vite
vite preview
vite preview --port:5000

谢谢

更新日期:2022年2月8日

我发现了一个方法。我们必须在vite build命令中添加flag --watch,例如:vite build --watch这样Vite只会把修改打包到前端并存储在/dist文件夹中,但它会监视外部服务器,如Nodejs。这样我们可以同时开发前端和后端文件,并立即看到结果。我们必须单独启动服务器文件,并从那里提供index.html。如果我们在服务器端使用Nodejs和Express,我们还必须将默认目录指向/dist,因为Vite将把捆绑文件放在那里,如app.use(express.static(__dirname + '/dist'));。节点将自动服务index.html和其他捆绑文件从这个文件夹。

qv7cva1a

qv7cva1a1#

基本上,您将在服务器选项上将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()

**这在以下文档中进行了说明:**vitejs.dev/guide/ssr.html#setting-up-the-dev-server

更新维生素2.x

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

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

blmhpbnm2#

有关另一种方法,请参见此示例:https://github.com/frameable/vite-vue-express-example
这种方式支持在开发中使用HMR进行实时更新,并且在单个节点进程中运行,因此您不需要分别协调后端和开发服务器。

相关问题