Vite 可以在 URL 上提供最新的编译源吗？

Question

我有一个 vite 项目，它为一个带有 Web 组件的小型 Web 应用程序提供服务。

出于某些技术原因，我希望能够访问 URL 并让 vite 为我提供最新版本的源文件。例如，如果文件位于

./src/some-file.mjs

中，我希望能够有一个可以点击

的 Web 组件

<!-- any URL is fine, this is just an example -->
<my-component src="localhost:3000/src/some-file.mjs"></my-component>

我也可以直接引用该文件：

<!-- any URL is fine, this is just an example -->
<my-component src="./src/some-file.mjs"></my-component>

面临的挑战是，我在 my-component 中使用动态导入，并将

src

属性的值视为 url（这将是开发之外的正常情况......可能是 CDN 或类似的）。

我想要 HMR - 所以当我更新文件时，它会触发重新加载，Web 组件重新渲染，下载新源并更新 ui。

到目前为止，我已经让它为 ./dist 目录提供服务。它没有给我 HMR，而且它的缓存也非常困难，所以即使我重建 dist，我也必须重新启动服务器才能提供新内容。不理想。

import { defineConfig } from 'vite';
import litPlugin from 'rollup-plugin-lit-css';

export default defineConfig({
  plugins: [litPlugin()],
  build: {
    lib: {
      entry: 'src/one-file.mjs',
      name: 'OneFile',
      formats: ['es', 'umd'], // Generate ES module and UMD builds
      fileName: (format) => `one-file.${format}.js`
    },
    rollupOptions: {
      // Additional Rollup options if needed
    }
  },
  server: {
    // Serve files from the ./dist directory
    fs: {
            // Disable strict serving behavior to allow serving from outside root
      strict: false,
            // Specify directories that should be accessible to the server
      allow: ['./dist']
    }
  }
});

我对如何获得此信息的最佳猜测是查看 Vite 是否可以从 URL 提供编译源，然后使用

src

属性定位该 URL。

有什么建议吗？

Answer 1

通常你不想要这个。如果您的组件需要使用应包含在应用程序构建中的应用程序状态，只需动态加载组件即可：

<script setup>
import {ref} from 'vue';
const dynamic = ref();
const load = async () => {
  dynamic.value = (await import('./DynamicComponent.vue')).default;
}
</script>

<template>
  <component :is="dynamic"/>
  <button @onclick="load">Load</button>
</template>

如果您的组件是独立的，请将其编译为应用程序并像往常一样按需动态挂载到 HTML 中。