zola vite demo

Zola + Vite 演示

这是一个最小的工作演示，展示了如何在没有特殊插件的情况下将 Zola 与 Vite 巧妙地连接起来。

• Zola 是一个简单而巧妙的静态站点生成器，它使用 Tera 模板引擎和类似 Jinja2/Twig 的语法。
• Vite 是一个类似于 Webpack 的前端构建工具，但更易于配置。

请注意，这不是一个入门项目或样板文件。

在这个演示中：

• Zola负责HTML处理，Vite负责JS和SASS处理。如果您更喜欢 Zola 处理 SASS 而不是 Vite，那么配置它很简单（请参阅 Zola 文档和我在 main.js 中的评论）。
• Zola 和 Vite 开发服务器并行运行。
• 热重载适用于 HTML、JS、SASS 代码。
• 可通过npm run使用命令（请参阅 package.json）。
• 生产版本被缩小：Zola 缩小了 HTML，Vite 缩小了 JS 和 CSS。

如何使用

1. 将 repo 和cd克隆到目录中。
2. 运行npm install以安装依赖项。
3. 运行npm run dev来运行 Zola 和 Vite 开发服务器。
4. 在浏览器中打开http://127.0.0.1:1111/。您应该看到一个页面，上面写着“欢迎来到 Zola + Vite 演示”和Hello world!在浏览器控制台中（如上面的屏幕截图所示）。
5. 对templates/index.html或js/main.js或sass/main.scss进行一些更改。 http://127.0.0.1:1111/ 的页面应立即更新，并反映您的更改。
6. 运行npm run build来构建供生产使用（文件将转到public/目录）。

已知问题

1. 我还没有在 Windows 上测试过该演示。
2. Vite 文档说它的条目应该包含import 'vite/modulepreload-polyfill' ，但我不太确定它的用途（参见 main.js ）。
3. 如果http://localhost:3000/@vite/client给你404，你需要先打开http://127.0.0.1:1111/。如果仍然不起作用，请参阅此内容。

建议、问题？

只需打开一个问题。请注意，与此存储库的目的无关的问题将被标记为已关闭。