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

我正在开发一个需要使用 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 组件中使用它的正确方法是什么？ …

原文由 AnchovyLegend 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 366

包含外部 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，可以这样导入：

我的组件.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

原文由 Yuci 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

包含外部 JavaScript 文件

导入本地 JavaScript 文件

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

Stack Overflow 翻译