这个用例有一个vue组件

https://github.com/TheDynomike/vue-script-component#usage

<template>
    <div>
        <VueScriptComponent script='<script type="text/javascript"> alert("Peekaboo!"); </script>'/>
    <div>
</template>

<script>
import VueScriptComponent from 'vue-script-component'

export default {
  ...
  components: {
    ...
    VueScriptComponent
  }
  ...
}
</script>

好吧，这是我在qiokian(一个live2d动画人物vuejs组件)中的实践:

(以下来自src/qiokian.vue文件)

<script>
export default {
    data() {
        return {
            live2d_path:
                'https://cdn.jsdelivr.net/gh/knowscount/live2d-widget@latest/',
            cdnPath: 'https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/',
        }
    },
<!-- ... -->
        loadAssets() {
            // load waifu.css live2d.min.js waifu-tips.js
            if (screen.width >= 768) {
                Promise.all([
                    this.loadExternalResource(
                        this.live2d_path + 'waifu.css',
                        'css'
                    ),
<!-- ... -->
        loadExternalResource(url, type) {
            // note: live2d_path parameter should be an absolute path
            // const live2d_path =
            //   "https://cdn.jsdelivr.net/gh/knowscount/live2d-widget@latest/";
            //const live2d_path = "/live2d-widget/";
            return new Promise((resolve, reject) => {
                let tag

                if (type === 'css') {
                    tag = document.createElement('link')
                    tag.rel = 'stylesheet'
                    tag.href = url
                } else if (type === 'js') {
                    tag = document.createElement('script')
                    tag.src = url
                }
                if (tag) {
                    tag.onload = () => resolve(url)
                    tag.onerror = () => reject(url)
                    document.head.appendChild(tag)
                }
            })
        },
    },
}

mounted() {
    if (document.getElementById('myScript')) { return }
    let src = 'your script source'
    let script = document.createElement('script')
    script.setAttribute('src', src)
    script.setAttribute('type', 'text/javascript')
    script.setAttribute('id', 'myScript')
    document.head.appendChild(script)
}


beforeDestroy() {
    let el = document.getElementById('myScript')
    if (el) { el.remove() }
}

如果你正在使用Vue 3和Composition API(我强烈推荐)，并且你经常使用<script>标记，你可以为它写一个“composable”函数:

import { onMounted } from "vue";

export const useScript = (src, async = false, defer = false) => {
  onMounted(() => {
    // check if script already exists
    if (document.querySelector(`head script[src="${src}"`)) return;

    // add tag to head
    const tag = document.createElement("script");
    tag.setAttribute("src", src);
    if (async) tag.setAttribute("async", "");
    if (defer) tag.setAttribute("defer", "");
    tag.setAttribute("type", "text/javascript");
    document.head.append(tag);
  });
};

或者，如果你正在使用VueUse(我也强烈推荐)，你可以使用他们现有的useScriptTag函数。

更新:这不再工作在Vue 3。你会收到这样的错误:

VueCompilerError:在客户端组件模板中忽略带有副作用(和)的标签。

如果你试图将外部js脚本嵌入vue.js组件模板，请遵循以下步骤:

我想向我的组件添加一个外部JavaScript嵌入代码，如下所示:

<template>
  <div>
    This is my component
    <script src="https://badge.dimensions.ai/badge.js"></script>
  </div>
<template>

Vue显示了这个错误:

模板应该只负责将状态映射到UI。避免在模板中放置带有副作用的标记，例如，因为它们不会被解析。

我解决这个问题的方法是通过添加type="application/javascript"(参见这个问题了解更多关于js的MIME类型):

<script type="application/javascript" defer src="…"" > < > /脚本

您可能会注意到defer属性。如果你想了解更多，请观看Kyle的视频

我下载了一些HTML模板，附带自定义js文件和jquery。我必须将这些js附加到我的应用程序，并继续使用Vue。

发现这个插件，它是一个干净的方式来添加外部脚本通过CDN和静态文件 https://www.npmjs.com/package/vue-plugin-load-script

// local files
// you have to put your scripts into the public folder. 
// that way webpack simply copy these files as it is.
Vue.loadScript("/js/jquery-2.2.4.min.js")

// cdn
Vue.loadScript("https://maps.googleapis.com/maps/api/js")