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/。如果仍然不起作用，請參閱此內容。

建議、問題？

只需打開一個問題。請注意，與此儲存庫的目的無關的問題將被標記為已關閉。