在无 Node.js 构建环境的纯前端 Vue 应用中，无法通过静态 import 语句动态插入时间戳实现缓存 busting；必须改用动态 import() 配合模板字符串，并注意语法与执行时机。
在无 node.js 构建工具的纯前端 vue 应用中，无法通过静态 `import` 语句动态插入时间戳实现缓存 busting；必须改用动态 `import()` 配合模板字符串，并注意语法与执行时机。
在传统打包项目中（如使用 Vite、Webpack 或 Vue CLI），缓存控制通常由构建工具自动完成：通过文件内容哈希生成唯一文件名（如 editor-input.abc123.js），并确保 HTML 或入口脚本引用最新资源。但当你的 Vue 应用直接运行于 <script type="module"> 环境、<strong>无任何构建步骤时，浏览器会强缓存已加载的 ES 模块——这意味着即使你更新了 editor-input.js，用户仍可能运行旧版本。</script>
此时，你自然想到为模块 URL 添加时间戳查询参数（如 ?v=1691592140153）来绕过缓存。然而，以下写法是语法错误且不可行的：
// ❌ 错误：静态 import 不支持运行时变量 const dateNow = Date.now(); import InputComponent from './folder/editor-input.js?v=' + dateNow; // SyntaxError
原因在于：ES 模块的 import 语句是编译时静态声明，其模块说明符（specifier）必须是字符串字面量，不能包含变量或表达式。
✅ 正确解法是使用动态导入（Dynamic Import） —— 它返回一个 Promise，支持运行时计算模块路径：
立即学习“前端免费学习笔记（深入）”；
// ✅ 正确：使用动态 import + 模板字符串
const dateNow = Date.now();
const { default: InputComponent } = await import(`./folder/editor-input.js?v=${dateNow}`);
const { default: ProductComponent } = await import(`./folder/editor-product.js?v=${dateNow}`);⚠️ 注意事项：
- 动态 import() 只能在 async 函数或顶层模块（Top-level await）中使用。若在 <script type="module"> 中使用，需确保浏览器支持（Chrome 63+、Firefox 67+、Safari 11.1+ 均支持）；</script>
- 导入结果是一个 Promise，解构时需用 { default: Xxx } 获取默认导出（Vue 组件通常为默认导出）；
- 时间戳应放在 import() 调用时生成，而非模块定义时，否则所有导入将共享同一时间戳（失去“每次刷新都最新”的意义）；
- 若组件需在 setup() 或 mounted 中按需加载，可封装为异步函数，避免阻塞初始渲染。
示例：在 Vue 3 的 setup script 中安全加载带缓存 busting 的组件
<script type="module">
import { createApp, defineAsyncComponent } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
// 使用 defineAsyncComponent 封装动态导入（推荐用于模板中）
const AsyncInputComponent = defineAsyncComponent(() =>
import(`./folder/editor-input.js?v=${Date.now()}`)
);
const AsyncProductComponent = defineAsyncComponent(() =>
import(`./folder/editor-product.js?v=${Date.now()}`)
);
createApp({
components: {
InputComponent: AsyncInputComponent,
ProductComponent: AsyncProductComponent
}
}).mount('#app');
</script>? 补充建议：
虽然动态导入可解决即时缓存问题，但长期来看，它会增加网络请求数、削弱 HTTP 缓存复用率，并丢失模块图的静态分析能力。更健壮的方案仍是引入轻量构建流程（如仅用 Vite 的 build --minify false 输出单文件），利用内容哈希实现精准缓存控制。但对于临时演示、内网管理页或极简部署场景，上述动态 import 方案是简洁、有效且符合标准的解决方案。
