如何在 nuxt 中将 <script> 插入 div

Posted 2023-03-06

【中文标题】如何在 nuxt 中将 <script> 插入 div

【英文标题】：How to inset <script> into div in nuxt

【发布时间】：2021-02-27 11:34:12

【问题描述】：

也许有人遇到过这样的问题并可以建议如何解决它： 我需要将脚本插入到一个特殊的 div 中。这个脚本改变了 DOM。插入块，添加类和样式。它是外部脚本和 它呈现这个页面。 Vue中没有问题。然后 Nuxt 抛出错误。 有人可以建议该怎么做吗？）

错误：

nuxt-error.vue?48f2:14 未捕获的类型错误：无法读取属性 “接受”未定义 在评估（VM6157 nuxt-error.vue:14） 在 Object../node_modules/vue-style-loader/index.js?!./node_modules/@nuxt/webpack/node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/ loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./.nuxt/components/nuxt-error.vue?vue&type =style&index=0&lang=css& (app.js:437) 在 (app.js:2) 在评估（VM6156 nuxt-error.vue:2） 在 Module../.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& (app.js:119) 在 (app.js:2) 在评估（VM6151 nuxt-error.vue:4） 在 Module../.nuxt/components/nuxt-error.vue (app.js:95) 在 (app.js:2) 在 eval (VM6142 index.js:35)

<template>
    <div class="skin" ref="scriptHolder">
      <div id="hwm-ubs-ticketsystem" data-id="757d440c95b9539fd9f79b8407fb8e9fe23b23315cfe6085">      </div>
    </div>
</template>

<script>

export default 
  components: 
  ,
  mounted() 
    let scriptEl = document.createElement('script')
    scriptEl.src = 'https://site/assets/js/app.js'
    scriptEl.type = "text/javascript"
    let styleEl = document.createElement('link')
    styleEl.setAttribute('href', 'https://site/assets/css/app.css')
    styleEl.setAttribute('rel', 'stylesheet')
    const divEl = document.querySelector('#hwm-ubs-ticketsystem')
    this.$refs['scriptHolder'].insertBefore(styleEl, divEl)
    this.$refs['scriptHolder'].appendChild(scriptEl)
  


</script>

<style>

</style>

Error Screenshot

【问题讨论】：

你想什么时候执行这个脚本？当页面呈现或点击时？

页面渲染时

如果你想添加一个类例如你可以使用 v-bind 并在页面呈现时添加一个类

为此，您只需要在 data() 中定义一个布尔值，例如 pageLoaded: false，我认为这个页面解释得更好vuejs.org/v2/guide/class-and-style.html

是的，但它是外部脚本，我无法编辑它。此页面上的所有操作都必须由此脚本执行。所有类和样式也由外部脚本添加。它呈现此页面的内容

【参考方案1】：

您可以检查 webpackJson 默认名称是否有问题。 Nuxt 使用 webpack 4 版本，也许您的外部脚本也使用 webpack 4，因此 webpackJson 首先由 nuxt 填充，然后使用外部脚本填充，并且在运行时存在冲突，因此您可以使用 jsonpFunction 更改 nuxt 项目的默认名称：'webpackJsonp_name' ，然后你的外部脚本应该默认加载 webpackJson。