如何插入<script> into div in nuxt

Question

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

错误：

nuxt-error.vue?48f2:14 未捕获的类型错误：无法在 Object../node_modules/vue-style-loader/index.js 处读取未定义的属性“接受”（VM6157 nuxt-error.vue:14）？ ./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.html 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:437) js:2) at eval (VM6156 nuxt-error.vue:2) at Module../.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& (app.js:119) at a (app .js:2) at eval (VM6151 nuxt-error.vue:4) at Module../.nuxt/components/nuxt-error.vue (app.js:95) at a (app.js:2) at 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>

错误截图

Answer 1

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