javascript - 导入 javascript 文件以在 vue 组件中使用

Question

我正在做一个需要使用 js 插件的项目。现在我们正在使用 vue 并且我们有一个组件来处理基于插件的逻辑，我需要在 vue 组件中导入 js 插件文件以初始化插件。

以前，这是在标记中按如下方式处理的:

<script src="//api.myplugincom/widget/mykey.js
"></script>

这是我尝试过的方法，但出现编译时错误:

我的组件.vue

import Vue from 'vue';
import * from  '//api.myplugincom/widget/mykey.js';

export default {
    data: {

我的问题是，导入此 javascript 文件以便我可以在我的 vue 组件中使用它的正确方法是什么？ ...

Answer 1

包含外部 JavaScript 文件

尝试将您的(外部)JavaScript 包含到您的 Vue 组件的挂载钩子(Hook)中。

<script>
export default {
  mounted() {
    const plugin = document.createElement("script");
    plugin.setAttribute(
      "src",
      "//api.myplugincom/widget/mykey.js"
    );
    plugin.async = true;
    document.head.appendChild(plugin);
  }
};
</script>

引用:How to include a tag on a Vue component

导入本地 JavaScript 文件

如果您想在 Vue 组件中导入本地 JavaScript，可以这样导入:

我的组件.vue

<script>
import * as mykey from '../assets/js/mykey.js'

export default {
  data() {
    return {
      message: `Hello ${mykey.MY_CONST}!` // Hello Vue.js!
    }
  }
}
</script>

假设您的项目结构如下:

src
- assets
    - js
      - mykey.js
- components
    MyComponent.vue

并且您可以在 mykey.js 中导出变量或函数:

export let myVariable = {};
export const MY_CONST = 'Vue.js';
export function myFoo(a, b) {
    return a + b;
}

注意:使用 Vue.js 版本 2.6.10 进行检查