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

2020-10-17 09:43:06 浏览数 (1)

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

给单页应用添加crossorigin

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

给同构应用添加crossorigin

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

代码语言：javascript复制
<!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中添加如下代码：

代码语言：javascript复制
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文件如下：

代码语言：javascript复制
build:{
  // ... 其他配置
  extend(config) {
    config.output.crossOriginLoading = 'anonymous'
  },
}

webpack配置crossOriginLoading可以看这里。

总结

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

代码语言：javascript复制
module.exports = {

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

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

  hooks: {
    'vue-renderer': {
      ssr: {
        templateParams(templateParams) {
          templateParams.APP = templateParams.APP.replace(
            /<script/gi,
            '<script crossorigin'
          )
        }
      }
    }
  }
}
html 渲染 webpack javascript 网站

0 人点赞