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

Question

我正在开发一个需要使用js插件的项目.既然我们正在使用vue并且我们有一个组件来处理基于插件的逻辑,我需要在vue组件中导入js插件文件以初始化插件.

以前,这是在标记内处理如下:

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

这是我试过的,但我得到一个编译时错误:

MyComponent.vue

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

export default {
    data: {

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

Answer 1

包含外部JavaScript文件

尝试将(外部)JavaScript包含在Vue组件的挂钩中.

<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>

参考:如何在Vue组件上包含标记

导入本地JavaScript文件

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

MyComponent.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;
}