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"