modern 属性

此功能的想法来自 vue-cli modern mode

  • 类型: String 或 Boolean

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

  • Modern bundle: 定位支持ES模块的现代浏览器

  • Legacy bundle: 基于babel配置定位兼容性低浏览器（默认情况下兼容IE9）。Info: 在package.json中，可以使用命令选项：[—modern | -m]=[mode] 来指定构建并启动(build/start) modern属性，例如：
  1. {
  2.   "scripts": {
  3.     "build:modern": "nuxt build --modern=server",
  4.     "start:modern": "nuxt start --modern=server"
  5.   }
  6. }

  • 当未指定modern时，在打包时Nuxt将自动检测nuxt start中的modern，自动检测模式为：

    ModeModern Mode
    universalserver
    spaclient

  • 在使用nuxt generate时，modern mode只有client

  • 使用 build.crossorigin 在<link> 和 <script> 中设置 crossorigin 属性

请参阅 Phillip Walton's excellent post 来了解更多关于modern builds信息.