Asp.net 4.8 MVC + Vite + Svelte + HMR？

Question

我有一个用 ASP.NET 4.8 MVC 构建的遗留应用程序。我想开始在 Svelte 中构建一些客户端功能 - 在 razor 视图内渲染 svelte 组件。这个我有工作。我可以在 razor 页面的任何位置渲染一个简洁的组件。然而 vite 有一些问题（我猜是 HMR？），它每隔几秒就会刷新 razor 页面（https://localhost:44300/somefeature）。

环境

asp.net 4.8 mvc 加载到 https://localhost:44300/
vite 正在加载 http://localhost:3000/

这是我到目前为止所拥有的。我运行 npm init vite@latest -> 选择 svelte + svelte TS

vite.config.js

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte({
      compilerOptions: {
        customElement: true,
      }
    })
  ],
  build:{
    // generate manifest.json in outDir
    manifest: true,
    rollupOptions: {
      // overwrite default .html entry
      input: '/src/main.ts'
    }
  }
})

然后我按照此处的说明进行操作https://vitejs.dev/guide/backend-integration.html并将其添加到剃刀页面：

@Html.Raw("<script type='module' src='http://localhost:3000/@vite/client'></script>")
<script type="module" src="http://localhost:3000/src/main.ts"></script>

（注意 - 必须使用 Html.Raw，因为它不会让我正确转义 @ - 即使使用 @@）
此时它正在完美地呈现我的 Svelte 组件。
然而问题是，vite 现在每 2 秒左右重新加载一次我的页面 - 我猜测是因为 HMR 不再正常工作，因为控制台只是说：[vite] 连接...

谁能给我指出一个方向，让 HMR 在使用另一个后端服务器的同时工作？由于某种原因，它可以在 ASP.NET Core 中运行，但在 ASP.NET 4.8 中则不然。有什么意见可以提供帮助吗？
提前致谢！

Answer 1

好的，我成功了。这是我的 vite.config.js。特别注意 input、outDir 和 server 节点，并根据您的场景进行调整。代理很重要，您可以将其设置为 https 或 http mvc 端点以及 asp.net 为您启动的端口。

这是配置：

export default defineConfig({
  plugins: [
    svelte()
  ],
  build:{
    // generate manifest.json in outDir
    manifest: true,
    rollupOptions: {
      // overwrite default .html entry
      input: 'Scripts/svelte/app.js',
    },
    outDir: 'Scripts/svelte/dist'
  },
  server: {
    proxy:{
      '*' : {
        target: 'http://localhost:26688',
        changeOrigin: true
      }
    },
    hmr: {
      protocol: 'ws'
    }
  }
})

它非常酷 - 您可以即时获取 Razor 页面内任何精简组件的 HMR，而不会丢失任何 Razor 状态。