diff --git a/docs/guide/deploy.md b/docs/guide/deploy.md index 471e7858..01eeafd3 100644 --- a/docs/guide/deploy.md +++ b/docs/guide/deploy.md @@ -291,3 +291,47 @@ You can deploy your Vitepress website on [Kinsta](https://kinsta.com/static-site ### Stormkit You can deploy your VitePress project to [Stormkit](https://www.stormkit.io) by following these [instructions](https://stormkit.io/blog/how-to-deploy-vitepress). + +### Nginx + +Here is a example of an Nginx server block configuration. This setup includes gzip compression for common text-based assets, rules for serving your VitePress site's static files with proper caching headers as well as handling `cleanUrls: true`. + +```nginx +server { + gzip on; + gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; + + listen 80; + server_name _; + index index.html; + + location / { + # content location + root /app; + + # exact matches -> reverse clean urls -> folders -> not found + try_files $uri $uri.html $uri/ =404; + + # non existent pages + error_page 404 /404.html; + + # a folder without index.html raises 403 in this setup + error_page 403 /404.html; + + # adjust caching headers + # files in the assets folder have hashes filenames + location ~* ^/assets/ { + expires 1y; + add_header Cache-Control "public, immutable"; + } + } +} +``` + +This configuration assumes that your built VitePress site is located in the `/app` directory on your server. Adjust the `root` directive accordingly if your site's files are located elsewhere. + +::: warning Do not default to index.html +The try_files resolution must not default to index.html like in other Vue applications. This would result in an invalid page state. +::: + +Further information can be found in the [official nginx documentation](https://nginx.org/en/docs/), in these issues [#2837](https://github.com/vuejs/vitepress/discussions/2837), [#3235](https://github.com/vuejs/vitepress/issues/3235) as well as in this [blog post](https://blog.mehdi.cc/articles/vitepress-cleanurls-on-nginx-environment#readings) by Mehdi Merah. diff --git a/docs/package.json b/docs/package.json index 8e853f7b..9ef5821a 100644 --- a/docs/package.json +++ b/docs/package.json @@ -3,11 +3,11 @@ "private": true, "type": "module", "scripts": { - "dev": "vitepress dev", "build": "vitepress build", - "preview": "vitepress preview", + "dev": "vitepress dev", "lunaria:build": "lunaria build", - "lunaria:open": "open-cli .vitepress/dist/_translations/index.html" + "lunaria:open": "open-cli .vitepress/dist/_translations/index.html", + "preview": "vitepress preview" }, "devDependencies": { "@lunariajs/core": "^0.0.32", diff --git a/docs/zh/guide/mpa-mode.md b/docs/zh/guide/mpa-mode.md index ae835efc..80bf92f7 100644 --- a/docs/zh/guide/mpa-mode.md +++ b/docs/zh/guide/mpa-mode.md @@ -2,9 +2,9 @@ 可以通过命令行输入 `vitepress build --mpa` 或在配置文件中指定 `mpa: true` 配置选项来启用 MPA (Multi-Page Application) 模式。 -在 MPA 模式下，所有页面都会默认不包含任何 JavaScript。因此，站点可能评估工具中获得更好的初始访问性能分数。 +在 MPA 模式下，所有页面都默认不会包含任何 JavaScript。因此，站点也许可以在评估工具中获得更好的初始访问性能分数。 -但是，由于 SPA 导航的缺失，跨页面链接将导致重新加载整个页面。MPA 模式下的导航不会像 SPA 模式那样立即响应。 +但是，由于缺少 SPA 路由，在 MPA 模式下切换页面时会重新加载整个页面，而不会像 SPA 模式那样立即响应。 同时请注意，默认情况下不使用 JavaScript 意味着你实际上只是将 Vue 作为服务器端模板语言。浏览器不会附加任何事件处理程序，因此将不会有任何交互性。要加载客户端 JavaScript，需要使用特殊的 `