如何使用Vite预编译Vue 3组件并将其用作静态HTML中的JS模块？

Question

我目前正在用 Vite 探索 Vue 3 的一个项目，我的目标是优化我的 Web 应用程序的加载时间。我的策略包括预编译 Vue 组件并将它们用作静态 HTML 文件中的 JavaScript 模块。但是，我想一次构建一个这些组件，并且我计划将组件路径作为构建参数传递。

以下是我想要实现的具体目标：

1. 预编译Vue 3组件：我想通过预编译Vue组件来优化性能。
2. 利用Vite进行开发和构建流程：我的目标是使用Vite，因为它的速度和效率。
3. 一次构建一个组件：我不想一次性编译所有组件，而是单独构建它们。
4. 将组件路径作为构建参数传递：要构建的组件的路径应作为构建参数传递。

尽管研究了 Vue 的文档和 Vite 的文档，但我找不到关于如何实现此特定设置的明确指南。

有人可以提供分步指南或为我提供有关如何使用 Vite 预编译 Vue 3 组件、一次构建一个组件并将组件路径作为构建参数传递的正确资源吗？我对将这些预编译组件作为 JavaScript 模块无缝合并到静态 HTML 文件中特别感兴趣。

有关此事的任何帮助或指导将不胜感激。谢谢！

Answer 1

目前，Vite 没有内置单独预编译 Vue 组件的功能，但您可以安装 @vue/compiler-sfc 包，该包与 Vite 使用的编译器相同。

安装后，您可以在项目的根目录创建一个文件 (build.js)，其中包含各个组件构建规则并配置您的 package.json:

"scripts": {
  "build:component": "node build.js"
}

然后，在执行脚本时，传递组件：
$ npm run build:component src/components/YourComponent.vue