Asp.net 4.8 MVC + Vite + Svelte TS + HMR？答案

【问题标题】：Asp.net 4.8 MVC + Vite + Svelte + HMR?Asp.net 4.8 MVC + Vite + Svelte TS + HMR？
【发布时间】：2022-02-06 21:49:24
【问题描述】：

我有一个在 ASP.NET 4.8 MVC 中构建的遗留应用程序。我想开始在 Svelte 中构建一些客户端功能 - 在 razor 视图中呈现 svelte 组件。我有这个工作。我可以在 razor 页面的任何地方渲染一个苗条的组件。但是 vite 有一些问题（我猜是 HMR？），它会每隔几秒刷新一次剃须刀页面（https://localhost:44300/somefeature）。

环境

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

这是我到目前为止所拥有的。我跑了 npm init vite@latest -> selected 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 核心中运行，但在 ASP.NET 4.8 中则不然。有什么意见可以帮助吗？
提前致谢！

【问题讨论】：

标签： asp.net-mvc svelte vite

【解决方案1】：

好的，我开始工作了。这是我的 vite.config.js。特别注意 input、outDir 和服务器节点，并根据您的场景调整它们。代理很重要，您可以将其设置为您的 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 状态。

【讨论】：