如何让Vite通过URL提供实时编译的最新源码并支持HMR？

核心问题分析 #

当前配置仅允许服务器访问./dist目录，导致开发时无法利用Vite原生HMR能力，且构建后文件缓存问题严重。正确思路是让Vite直接处理src目录源码，开发时提供带HMR支持的编译后URL，生产环境通过构建配置保留模块结构以适配CDN访问。

具体实现步骤 #

1. 调整Vite配置，开放源码目录并优化构建输出 #

修改vite.config.js，让开发服务器直接访问src目录，同时配置生产构建保留模块结构：

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'],
      fileName: (format) => `one-file.${format}.js`
    },
    rollupOptions: {
      output: {
        preserveModules: true, // 保留src目录的模块结构，生产环境可按原路径访问
        dir: 'dist'
      }
    }
  },
  server: {
    fs: {
      strict: false,
      allow: ['./src', './dist'] // 开发时优先用src，同时兼容临时访问dist
    }
  }
});

2. 改造Web组件，实现动态导入与HMR监听 #

在组件内部处理src属性变化，通过动态导入加载模块，并监听Vite的HMR事件实现自动重载：

class MyComponent extends HTMLElement {
  static get observedAttributes() {
    return ['src'];
  }

  async attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'src' && newValue !== oldValue) {
      await this.loadModule(newValue);
    }
  }

  async loadModule(src) {
    // 动态导入目标模块，开发环境Vite自动注入HMR逻辑
    let module = await import(src);

    // 监听模块更新，触发组件重新渲染
    if (import.meta.hot) {
      import.meta.hot.accept(src, (updatedModule) => {
        module = updatedModule;
        this.render(module);
      });
    }

    this.render(module);
  }

  render(module) {
    // 根据模块内容自定义渲染逻辑
    this.innerHTML = `<div>${module.default || module}</div>`;
  }
}

customElements.define('my-component', MyComponent);

3. 开发与生产环境的URL使用方式 #

• 开发环境：直接使用相对路径或本地服务器绝对路径，例如：

  <my-component src="./src/some-file.mjs"></my-component>
  <!-- 或 -->
  <my-component src="http://localhost:3000/src/some-file.mjs"></my-component>
  

  Vite会自动处理模块编译，文件修改时触发HMR，组件自动重载新代码。

• 生产环境：构建后dist目录保留src模块结构，可将src属性指向CDN对应路径，例如：

  <my-component src="https://your-cdn.com/src/some-file.mjs"></my-component>
  

内容的提问来源于stack exchange，提问作者Sir Robert