Nuxt项目给script标签添加crossorigin属性

最近给项目添加一个错误日志上报的功能,由于使用的是第三方的服务,导致上报的错误信息都是Script error.文档上写的很清楚,要处理这个问题只需要两步:添加“crossorigin="anonymous" 属性添加跨域 HTTP 响应头。那么Nuxt项目该如何添加crossorigin呢?


给单页应用添加crossorigin

单页应用意味着nuxt.config.jsmode的值是spa。spa添加crossorigin很简单,官方文档上也有说明,只要在nuxt.config.js文件中的build属性下添加crossorigin: 'anonymous'就可以了。你可以运行npm run build,然后查看项目根目录下的.nuxt/dist/server/index.spa.html文件,其中script标签是有crossorigin属性的。

给同构应用添加crossorigin

同构应用(即使用了服务端渲染)意味着nuxt.config.jsmode的值是universal。此时再用上面的方法发现上述的.nuxt/dist/server/index.spa.html文件是加了crossorigin属性的,但是服务端渲染的文件.nuxt/dist/server/index.ssr.html却没有,其内容大概如下:

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html {{ html_attrs }}>

<head>
<!-- 省略部分内容 -->
</head>
<body {{ body_attrs }}>
<!-- built files will be auto injected -->
{{ APP }}
</body>

</html>

实际运行的时候script标签是服务端渲染时动态在上述APP变量处生成的,这个时候我们就需要对渲染的HTML模板APP处进行修改,可以直接使用Nuxt的钩子函数,在nuxt.config.js文件,导出的json中添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
hooks: {
'vue-renderer': {
ssr: {
templateParams(templateParams) {
templateParams.APP = templateParams.APP.replace(
/<script/gi,
'<script crossorigin'
)
}
}
}
}

Nuxt更多hooks相关内容可以看这里

编译时添加crossorigin

还有一种情况就是类似于动态import,他生成script标签的时候是受babel来控制的。这时就需要修改webpack打包时候的配置了,好在Nuxt是支持修改配置的,再修改nuxt.config.js文件如下:

1
2
3
4
5
6
build:{
// ... 其他配置
extend(config) {
config.output.crossOriginLoading = 'anonymous'
},
}

webpack配置crossOriginLoading可以看这里

总结

综上,需要在nuxt.config.js文件中添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {

build:{
// ... 其他配置

extend(config) {
config.output.crossOriginLoading = 'anonymous'
},
},

hooks: {
'vue-renderer': {
ssr: {
templateParams(templateParams) {
templateParams.APP = templateParams.APP.replace(
/<script/gi,
'<script crossorigin'
)
}
}
}
}
}
-------------本文结束 感谢您的阅读-------------
0%