API: modern 属性
优质
小牛编辑
126浏览
2023-12-01
此功能的想法来自 vue-cli modern mode
- 类型:
String
或Boolean
- 默认: false
- 可能的值:
'client'
: 构建两个版本的包:同时提供面向支持现在浏览器的 ES2015+ 写法支持<script type ="module">
和兼容性低的其他旧浏览器的包<script nomodule>
的脚本,同时为现代浏览器打包提供<link rel ="modulepreload">
。每个正确解析模块类型的现代浏览器都会加载现代浏览器软件依赖包,而旧版浏览器则会加载到指定旧版浏览器的依赖包(已编译)。'server'
ortrue
: Node.js服务器将根据用户代理检查浏览器版本,并提供相应的现代浏览器或兼容性低的浏览器捆绑依赖。false
: 关闭 modern 打包
捆绑打包的两个版本是:
- Modern bundle: 定位支持ES模块的现代浏览器
- Legacy bundle: 基于babel配置定位兼容性低浏览器(默认情况下兼容IE9)。
Info: 在package.json中,可以使用命令选项:[--modern | -m]=[mode]
来指定构建并启动(build/start
) modern属性,例如:
{
"scripts": {
"build:modern": "nuxt build --modern=server",
"start:modern": "nuxt start --modern=server"
}
}
- 当未指定
modern
时,在打包时Nuxt将自动检测nuxt start
中的modern
,自动检测模式为:
Mode | Modern Mode |
---|---|
universal | server |
spa | client |
- 在使用
nuxt generate
时,modern mode
只有client
- 使用
build.crossorigin
在<link>
和<script>
中设置crossorigin
属性
请参阅 Phillip Walton's excellent post 来了解更多关于modern builds信息.