modern 属性

构建并提供现代 bundle

此功能受 vue-cli 的现代模式 启发

• 类型: String 或 Boolean
  • 默认值: false
  • 可选值:
    • 'client'：同时提供现代 bundle <script type="module"> 和旧版 bundle <script nomodule> 脚本，以及现代 bundle 的 <link rel="modulepreload">。所有理解 module 类型的浏览器会加载现代 bundle，旧版浏览器则回退到旧版（已转译的）bundle。
    • 'server' 或 true：Node.js 服务器根据用户代理检查浏览器版本，并提供相应的现代或旧版 bundle。
    • false：禁用现代构建

两个版本的 bundle：

1. 现代 bundle：面向支持 ES modules 的现代浏览器。
2. 旧版 bundle：基于 babel 配置（默认兼容 IE9）面向旧版浏览器。

信息：

• 使用命令选项 [--modern | -m]=[mode] 构建/启动现代 bundle：

{
  "scripts": {
    "build:modern": "nuxt build --modern=server",
    "start:modern": "nuxt start --modern=server"
  }
}

关于 nuxt generate 的注意事项： modern 属性也适用于 nuxt generate 命令，但此时只有 client 选项优先，运行不带值的 nuxt generate --modern 命令时会自动选择。

• 未指定 modern 时，Nuxt 会自动检测 nuxt start 的 modern 构建，自动检测模式如下：

• nuxt generate 的现代模式只能是 client。
• 使用 render.crossorigin 在 <link> 和 <script> 标签上设置 crossorigin 属性。

有关现代构建的更多详情，请参阅 Phillip Walton 的精彩文章 。