时间戳

首页 > 解决方案 > vue ssr如何在脚本标签中添加属性

javascript - vue ssr如何在脚本标签中添加属性

问题描述

我使用带有https://ssr.vuejs.org/的文档 guid ，但我找不到任何方法在脚本标签上添加自定义属性。我想在crossorigin="anonymous脚本标签上添加正确的错误而不是“脚本错误” ' 。</p>

标签： javascriptvue.js

解决方案

我找到了一种方法，可以为scaript标签添加自定义attr，只需使用·手动资产注入·然后你会得到脚本字符串，然后更改它。文档在这里：https://ssr.vuejs.org/zh/指南/build-config.html#%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%85%8D%E7%BD%AE-client-config

代码吹：</p> 

    const content = await bundleRenderer.renderToString(context);
    console.log('context.renderResourceHints()',context.renderResourceHints())
    console.log('context.renderStyles()',context.renderStyles())
    console.log('context.renderScripts()',context.renderScripts())

    const html = `
<!DOCTYPE html>
<html>
  <head>
    ${context.renderResourceHints()}
    ${context.renderStyles()}
    <title>Hello Vue 13</title>
  </head>
  <body>
    <div id="app">${content}</div>
    ${context.renderScripts()}
  </body>
</html>  
    `.trim();

    res.send(html);

结果是：

context.renderResourceHints() <link rel="preload" href="/dist/manifest.js" as="script"><link rel="preload" href="/dist/css/styles.css" as="style"><link rel="preload" href="/dist/js/styles.5d70cd50ea7f1b9c411b.js" as="script"><link rel="preload" href="/dist/js/vendors~app.4be2234d42fb0ae60615.js" as="script"><link rel="preload" href="/dist/js/app.5db4c221de97601de33e.js" as="script"><link rel="prefetch" href="/dist/js/about.8e31d4893b2bd4ba6eee.js"><link rel="prefetch" href="/dist/js/blank.d47479964602e2a1ba7b.js">
context.renderStyles() <link rel="stylesheet" href="/dist/css/styles.css">
context.renderScripts() <script src="/dist/manifest.js" defer></script><script src="/dist/js/styles.5d70cd50ea7f1b9c411b.js" defer></script><script src="/dist/js/vendors~app.4be2234d42fb0ae60615.js" defer></script><script src="/dist/js/app.5db4c221de97601de33e.js" defer></script>

我们得到字符串我们可以改变它吗？</p>

推荐阅读