是否可以在没有服务器运行的情况下部署Vue和Vite？

Question

我有一个非常具体的问题，因为我希望创建一个无需服务器即可工作的网页，并且我尝试使用 vite 来完成它，我的整个项目正在使用 vue + vite。

如果我尝试使用“vite build”命令，页面部署为空白，并且我可以看到该页面的唯一方法是使用“vite Preview”。

是否有可能以某种方式使用 vite 加载 html 页面的内容，而不需要“vite 预览”？只需双击index.html

Answer 1

使用 vue-cli，可以通过将 vue.config.js 文件中的 publicPath 设置为空字符串来实现这一点，请参阅：https: //cli.vuejs.org/config/#publicpath 我个人只将其与 Vue 一起使用2，但从我在网上读到的内容来看，如果您愿意切换到 vue-cli，那么使用 Vue 3 应该也可以实现。

使用 Vite，我发现了这个问题和答案，它展示了一种将所有脚本、CSS 和图像捆绑到单个文件中的方法： How to open a static website in localhost but generated with Vite and without running a server?

我确实尝试过，它大部分都有效，但目前不适用于我在应用程序中经常使用的 svg 文件。它可能适合您的用例。

我确实还需要添加 "type": "module",package.json 以消除错误

“错误 [ERR_REQUIRE_ESM]：不支持来自 /path/to/vite.config.inlined.ts 的 ES 模块 /path/to/dist/index.js 的 require()。”

Answer 2

如果您只是将页面打开为，您将在某些API 调用等index.html方面受到限制。如今，您将需要一个轻型服务器来通过您所看到的简单方式来托管它。这主要是因为这些文件正在与 Webpack 和 Vite 等捆绑程序一起使用。vite preview

我不确定是否有一种方法可以仅使用 来加载整个内容，index.html因为像这样的文件本身.vue不支持，您需要一个特定的加载器。

一种简单的解决方案是使用 Vue 作为 CDN，但这会限制您有关SFC 文件的DX 体验，但您将能够在常规index.html文件中使用 Vue。
PS：你的性能总体上也会变差（因为需要网络请求）。

如果你想要真正轻量级的东西，你当然也可以使用petite-vue，也许更适合对反应性需求很小的超级简单项目。

我仍然建议使用 Netlify 或 Vercel 之类的东西来免费托管您的静态站点 + 借助为vite preview您运行的服务器来获得完整的 Vue 体验。