Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions en/guide/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ It is a convention to prefix those functions with a `$`.

### Inject into Vue instances

Injecting content into Vue instances works similar to when doing this in standard Vue apps.
Injecting context into Vue instances works similar to when doing this in standard Vue apps.

`plugins/vue-inject.js`:

Expand Down Expand Up @@ -104,7 +104,7 @@ export default {

### Inject into context

Injecting content into Vue instances works similar to when doing this in standard Vue apps.
Injecting context into Vue instances works similar to when doing this in standard Vue apps.

`plugins/ctx-inject.js`:

Expand Down
9 changes: 9 additions & 0 deletions zh/api/configuration-build.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,15 @@ module.exports = {

> 启用 [uglifyjs-webpack-plugin ](https://github.com/webpack-contrib/uglifyjs-webpack-plugin#options) 和 [cache-loader](https://github.com/webpack-contrib/cache-loader#cache-loader) 的缓存

## crossorigin

- 类型: `String`
- 默认: `undefined`

在生成的HTML中的`<link rel ="stylesheet">`和`<script>`标签上配置`crossorigin`属性。

请查看 [CORS settings attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) 了解更多可用选项。

## cssSourceMap

- 类型: `boolean`
Expand Down
23 changes: 17 additions & 6 deletions zh/api/configuration-modern.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@ title: "API: modern 属性"
description: Build and server a modern bundle
---

# The modern Property
# modern 属性

> 此功能的想法来自 [vue-cli modern mode](https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode)
> 此功能的想法来自 [vue-cli modern mode](https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode)

- 类型: `String` 或 `Boolean`
- 默认: false
- 可能的值:
- `'client'`: 同时提供现代捆绑打包`<script type ="module">`和旧捆绑打包`<script nomodule>脚本,同时为现代捆绑打包提供`<link rel ="modulepreload">`。每个了解模块类型的浏览器都会加载现代软件包,而旧版浏览器则会回归到旧版浏览器(已编译)。
- `'server'` or `true`: Node.js服务器将根据用户代理检查浏览器版本,并提供相应的现代或旧版捆绑
- `'client'`: 构建两个版本的包:同时提供面向支持现在浏览器的 ES2015+ 写法支持 `<script type ="module">` 和兼容性低的其他旧浏览器的包 `<script nomodule>` 的脚本,同时为现代浏览器打包提供 `<link rel ="modulepreload">` 。每个正确解析模块类型的现代浏览器都会加载现代浏览器软件依赖包,而旧版浏览器则会加载到指定旧版浏览器的依赖包(已编译)。
- `'server'` or `true`: Node.js服务器将根据用户代理检查浏览器版本,并提供相应的现代浏览器或兼容性低的浏览器捆绑依赖
- `false`: 关闭 modern 打包

捆绑打包的两个版本是:

1. Modern bundle: 定位支持ES模块的现代浏览器
1. Legacy bundle: 基于babel配置定位旧浏览器(默认情况下兼容IE9)。
1. Legacy bundle: 基于babel配置定位兼容性低浏览器(默认情况下兼容IE9)。

**Info:** 你可以使用命令`nuxt build/start --modern=[type]`或`nuxt build/start -m=[type]`来构建/启动现代捆绑包,这样你就可以在`package.json`脚本中指定现代命令
**Info:** 在package.json中,可以使用命令选项:`[--modern | -m]=[mode]` 来指定构建并启动(`build/start`) modern属性,例如

```json
{
Expand All @@ -30,4 +30,15 @@ description: Build and server a modern bundle
}
```


- 当未指定`modern`时,在打包时Nuxt将自动检测`nuxt start`中的`modern`,自动检测模式为:

| Mode | Modern Mode |
| ------------- |:-------------:|
| universal | server |
| spa | client |

- 在使用`nuxt generate`时,`modern mode`只有`client`
- 使用 [`build.crossorigin`](/api/configuration-build#crossorigin) 在`<link>` 和 `<script>` 中设置 `crossorigin` 属性

> 请参阅 [Phillip Walton's excellent post](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) 来了解更多关于modern builds信息.