diff --git a/.vitepress/theme/index.js b/.vitepress/theme/index.js
index 3cedb624..bf23b430 100644
--- a/.vitepress/theme/index.js
+++ b/.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;
+ }
+ })
}
}
diff --git a/blog/announcing-vite2.md b/blog/announcing-vite2.md
index 1bab382f..35f1d0c4 100644
--- a/blog/announcing-vite2.md
+++ b/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 会作为一个底层功能,而我们期待看到更高层级的框架在此基础上的应用。
diff --git a/config/index.md b/config/index.md
index 45e5c329..7688d9ba 100644
--- a/config/index.md
+++ b/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`
diff --git a/guide/assets.md b/guide/assets.md
index 5cb47eeb..b1b9fb3f 100644
--- a/guide/assets.md
+++ b/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:
+import.meta.url 是一个 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)
diff --git a/guide/backend-integration.md b/guide/backend-integration.md
index d94a13d9..d0fc50d2 100644
--- a/guide/backend-integration.md
+++ b/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
diff --git a/guide/migration.md b/guide/migration.md
index 71fc8849..2254fe5a 100644
--- a/guide/migration.md
+++ b/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') }
diff --git a/guide/static-deploy.md b/guide/static-deploy.md
index cf4fd422..6fe68cae 100644
--- a/guide/static-deploy.md
+++ b/guide/static-deploy.md
@@ -138,24 +138,28 @@ $ npm run preview
如果你要部署在 `https://.gitlab.io//` 上,例如你的仓库地址为 `https://gitlab.com//`,那么请设置 `base` 为 `'//'`。
-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": ""
- }
+ "projects": {
+ "default": ""
+ }
}
```
diff --git a/guide/using-plugins.md b/guide/using-plugins.md
index 8053e2c3..a776d124 100644
--- a/guide/using-plugins.md
+++ b/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}
diff --git a/package.json b/package.json
index 9e13fb9d..90fb2c6b 100644
--- a/package.json
+++ b/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"
},
diff --git a/yarn.lock b/yarn.lock
index f16545e3..8f69ae1b 100644
--- a/yarn.lock
+++ b/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"