release: v2.5.0

release: v2.5.0

Author: QC-L

.vitepress/theme/index.js

@@ -33,5 +33,14 @@ export default {
           )
         ])
     })
+  },
+  enhanceApp({ app, router, siteData }) {
+    // app is the Vue 3 app instance from `createApp()`. router is VitePress'
+    // custom router. `siteData`` is a `ref`` of current site-level metadata.
+    app.directive('href', {
+      mounted(el, binding) {
+        el.href = binding.value;
+      }
+    })
   }
 }

blog/announcing-vite2.md

@@ -46,7 +46,7 @@ Vite 将 CSS 看作模块系统中的一等公民，并且内置了以下支持
 
 ### 服务端渲染（SSR）支持 {#server-side-rendering-ssr-support}
 
-Vite 2.0 提供 [实验性的 SSR 支持](/guide/ssr)。Vite 提供一个灵活的 API 来在 Node.js 中高效率地直接加载 ESM 源码（并且同样有精准的更新而不需要打包）。提供 CommonJS 版本的依赖会在 SSR 时自动被跳过转换直接加载。生产环境下，服务器可以和 Vite 完全解耦。基于 Vite SSR 的架构也可以很方便的做静态预渲染（SSG)。
+Vite 2.0 提供 [实验性的 SSR 支持](/guide/ssr)。Vite 提供了灵活的 API，以便于在开发过程中直接通过 Node.js 高效率地加载和更新 ESM 的源码（几乎与服务端的 HMR 一致），并自动外部化与 CommonJS 兼容的依赖关系，以提高开发和 SSR 的构建速度。生产环境下，服务器可以和 Vite 完全解耦。基于 Vite SSR 的架构也可以很方便的做静态预渲染（SSG)。
 
 Vite SSR 会作为一个底层功能，而我们期待看到更高层级的框架在此基础上的应用。
 

config/index.md

@@ -78,7 +78,7 @@ export default defineConfig(async ({ command, mode }) => {
   return {
     // 构建模式所需的特有配置
   }
-}
+})
 ```
 
 ## 共享配置 {#shared-options}
@@ -213,7 +213,7 @@ export default defineConfig(async ({ command, mode }) => {
   ```ts
   interface CSSModulesOptions {
     scopeBehaviour?: 'global' | 'local'
-    globalModulePaths?: string[]
+    globalModulePaths?: RegExp[]
     generateScopedName?:
       | string
       | ((name: string, filename: string, css: string) => string)
@@ -396,7 +396,7 @@ export default defineConfig(async ({ command, mode }) => {
     server: {
       proxy: {
         // 字符串简写写法
-        '/foo': 'http://localhost:4567/foo',
+        '/foo': 'http://localhost:4567',
         // 选项写法
         '/api': {
           target: 'http://jsonplaceholder.typicode.com',
@@ -453,6 +453,8 @@ export default defineConfig(async ({ command, mode }) => {
 
   传递给 [chokidar](https://github.com/paulmillr/chokidar#api) 的文件系统监听器选项。
 
+  当需要再 Windows Subsystem for Linux (WSL) 2 上运行 Vite 时，如果项目文件夹位于 Windows 文件系统中，你需要将此选项设置为 `{ usePolling: true }`。这是由于 Windows 文件系统的 [WSL2 限制](https://github.com/microsoft/WSL/issues/4739) 造成的。
+
 ### server.middlewareMode {#server-middlewaremode}
 
 - **类型：** `'ssr' | 'html'`
@@ -543,6 +545,21 @@ createServer()
 
   注意：如果代码包含不能被 `esbuild` 安全地编译的特性，那么构建将会失败。查看 [esbuild 文档](https://esbuild.github.io/content-types/#javascript) 获取更多细节。
 
+### build.polyfillModulePreload {#build-polyfillmodulepreload}
+
+- **类型：** `boolean`
+- **默认值：** `true`
+
+  用于决定是否自动注入 [module preload 的 polyfill](https://guybedford.com/es-module-preloading-integrity#modulepreload-polyfill).
+
+  如果设置为 `true`，此 polyfill 会被自动注入到每个 `index.html` 入口的 proxy 模块中。如果是通过 `build.rollupOptions.input` 将构建配置为使用非 html 的自定义入口，那么则需要在你自定义入口中手动引入 polyfill：
+
+  ```js
+  import 'vite/modulepreload-polyfill'
+  ```
+
+  注意：此 polyfill **不适用于** [Library 模式](/guide/build#library-mode)。如果你需要支持不支持动态引入的浏览器，你应该避免在你的库中使用此选项。
+
 ### build.outDir {#build-outdir}
 
 - **类型：** `string`

guide/assets.md

@@ -85,7 +85,7 @@ import InlineWorker from './shader.js?worker&inline'
 
 ## new URL(url, import.meta.url)
 
-[import.meta.url](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta) 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 [URL 构造器](https://developer.mozilla.org/en-US/docs/Web/API/URL) 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：
+<a v-href="'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import'+'.meta'">import.meta.url</a> 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 [URL 构造器](https://developer.mozilla.org/en-US/docs/Web/API/URL) 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：
 
 ```js
 const imgUrl = new URL('./img.png', import.meta.url)

guide/backend-integration.md

@@ -1,8 +1,10 @@
 # 后端集成 {#backend-integration}
 
+:::tip Note
 如果你想使用传统的后端（如 Rails, Laravel）来服务 HTML，但使用 Vite 来服务其他资源，可以查看在 [Awesome Vite](https://github.com/vitejs/awesome-vite#integrations-with-backends) 上的已有的后端集成列表。
 
-或者你可以按照如下步骤手动配置：
+如果你需要自定义集成，你可以按照本指南的步骤配置它：
+:::
 
 1. 在你的 Vite 配置中配置入口文件和启用创建 `manifest`：
 
@@ -20,6 +22,13 @@
    })
    ```
 
+   如果你没有禁用 [module preload 的 polyfill](/config/#build-polyfillmodulepreload)，你还需在你的入口处添加此 polyfill：
+
+   ```js
+   // 在你应用的入口起始处添加此 polyfill
+   import 'vite/modulepreload-polyfill'
+   ```
+
 2. 在开发环境中，在服务器的 HTML 模板中注入以下内容（用正在运行的本地 URL 替换 `http://localhost:3000`）：
 
    ```html

guide/migration.md

@@ -31,13 +31,13 @@
   - `httpsOptions` 已被删除，[`server.https`](/config/#server-https) 可以直接接收选项对象。
   - `chokidarWatchOptions` 变更为 [`server.watch`](/config/#server-watch)。
 
-- [`assetsInclude`](/config/#assetsInclude) 现在接收 `string | RegExp | (string | RegExp)[]` 而不是一个函数。
+- [`assetsInclude`](/config/#assetsinclude) 现在接收 `string | RegExp | (string | RegExp)[]` 而不是一个函数。
 
 - 所有 Vue 特定选项都已移除；应将选项传递给 Vue 插件。
 
 ## 别名用法变化 {#alias-behavior-change}
 
-[`alias`](/config/#alias) 现在会被传递给 `@rollup/plugin-alias` 并不再需要开始/结尾处的斜线了。此行为目前是一个直接替换，所以 1.0 风格的目录别名需要删除其结尾处的斜线：
+[`alias`](/config/#resolve-alias) 现在会被传递给 `@rollup/plugin-alias` 并不再需要开始/结尾处的斜线了。此行为目前是一个直接替换，所以 1.0 风格的目录别名需要删除其结尾处的斜线：
 
 ```diff
 - alias: { '/@foo/': path.resolve(__dirname, 'some-special-dir') }

guide/static-deploy.md

@@ -138,24 +138,28 @@ $ npm run preview
 
    如果你要部署在 `https://<USERNAME or GROUP>.gitlab.io/<REPO>/` 上，例如你的仓库地址为 `https://gitlab.com/<USERNAME>/<REPO>`，那么请设置 `base` 为 `'/<REPO>/'`。
 
-2. 在 `vite.config.js` 中设置 `build.outDir` 为 `public`。
-
-3. 在项目根目录创建一个 `.gitlab-ci.yml` 文件，并包含以下内容。它将使得每次你更改内容时都重新构建与部署站点：
+2. 在项目根目录创建一个 `.gitlab-ci.yml` 文件，并包含以下内容。它将使得每次你更改内容时都重新构建与部署站点：
 
    ```yaml
-   image: node:10.22.0
+   image: node:16.5.0
    pages:
+     stage: deploy
      cache:
+       key:
+         files:
+           - package-lock.json
+         prefix: npm
        paths:
          - node_modules/
      script:
        - npm install
        - npm run build
+       - cp -a dist/. public/
      artifacts:
        paths:
          - public
-     only:
-       - master
+     rules:
+       - $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
    ```
 
 ## Netlify {#netlify}
@@ -188,9 +192,9 @@ $ npm run preview
 
    ```js
    {
-    "projects": {
-      "default": "<YOUR_FIREBASE_ID>"
-    }
+     "projects": {
+       "default": "<YOUR_FIREBASE_ID>"
+     }
    }
    ```
 

guide/using-plugins.md

@@ -36,7 +36,7 @@ Vite 旨在为常见的 Web 开发范式提供开箱即用的支持。在寻找
 
 查看 [Plugins 章节](../plugins/) 获取官方插件信息。社区插件列表请参见 [awesome-vite](https://github.com/vitejs/awesome-vite#plugins)。而对于兼容的 Rollup 插件，请查看 [Vite Rollup 插件](https://vite-rollup-plugins.patak.dev) 获取一个带使用说明的兼容 Rollup 官方插件列表，若列表中没有找到，则请参阅 [Rollup 插件兼容性章节](../guide/api-plugin#rollup-plugin-compatibility)。
 
-你也可以使用此 [npm Vite 插件搜索链接](https://www.npmjs.com/search?q=vite-plugin&ranking=popularity) 来找到一些遵循了 [推荐约定](./api-plugin.md#conventions) 的 Vite 插件，或者此 [npm Rollup 插件搜索链接](https://www.npmjs.com/search?q=rollup-plugin&ranking=popularity) 获取 Rollup 插件。
+你也可以使用此 [npm Vite 插件搜索链接](https://www.npmjs.com/search?q=vite-plugin&ranking=popularity) 来找到一些遵循了 [推荐约定](./api-plugin.md#conventions) 的 Vite 插件，或者通过 [npm Rollup 插件搜索链接](https://www.npmjs.com/search?q=rollup-plugin&ranking=popularity) 获取 Rollup 插件。
 
 ## 强制插件排序 {#enforcing-plugin-ordering}
 

package.json

@@ -8,6 +8,7 @@
 	"private": true,
 	"devDependencies": {
 		"chalk": "^4.1.0",
+		"patch-vue-directive-ssr": "^0.0.1",
 		"vitepress": "^0.12.2",
 		"yorkie": "^2.0.0"
 	},

yarn.lock

@@ -1057,6 +1057,11 @@ p-finally@^1.0.0:
   resolved "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
   integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
+patch-vue-directive-ssr@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/patch-vue-directive-ssr/-/patch-vue-directive-ssr-0.0.1.tgz#2eac731f59cdb766d4d613bc24e522ded6ff1bb8"
+  integrity sha512-n84llktHah+EXUGo+RvmTJcAQJQVW0kHHHiJ34ZSLijzhHi32zCMjCc5VAFv4jmdC91bpaYGPk0cDW1D8hQ3GQ==
+
 path-key@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"