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

【问题标题】：Importing javascript file for use within vue component导入 javascript 文件以在 vue 组件中使用
【发布时间】：2018-07-03 18:19:25
【问题描述】：

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

【问题讨论】：

您能否更准确地了解您正在使用的工具npm / webpack ...？你需要哪个库，内部/外部？
它是一个外部库，我正在使用 laravel-mix 进行编译。如果可能的话，我希望任何导入逻辑都是特定于 vue 组件的:)
import something from path。路径在编译时解析，因此您需要引用本地目录中的文件。不是 URI 的结尾。
什么错误信息？如果你想使用库中包含的方法，你需要 named 类型的 import developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… import * as myModule from '//api.myplugincom/widget/mykey.js'; 还有，你的 path 是错误的

标签： javascript import ecmascript-6 vue.js vuejs2

【解决方案1】：

适用于包括外部 JS 文件且无法访问已加载脚本中的 jQuery 原型方法的任何人。

我在 vanilla JS、React 和 Angular 中看到的示例项目只是使用：

$("#someId").somePlugin(options) 要么 window.$("#someId").somePlugin(options)

但是当我尝试我的 VueJS 组件中的任何一个时，我会收到：

错误：_webpack_provided_window_dot$(...).somePluginis 不是函数

我在资源加载后检查了窗口对象，我能够在window.self 只读属性中找到返回窗口本身的 jQuery 原型方法：

window.self.$("#someId").somePlugin(options)

许多示例展示了如何在 VueJS 中加载外部 JS 文件，但实际上并未使用组件中的 jQuery 原型方法。

【讨论】：

【解决方案2】：

我想在我的组件中嵌入一个脚本并尝试了上面提到的所有方法，但脚本包含document.write。然后我在 Medium 上找到了一篇关于使用 postscribe 的简短文章，这很容易解决并解决了这个问题。

npm i postscribe --save

然后我就可以从那里去了。我禁用了 eslint 的无用转义，并使用 #gist 作为模板的单个根元素 id：

import postscribe from 'postscribe';
export default {
    name: "MyTemplate",
    mounted: function() {
        postscribe(
          "#gist",
          /* eslint-disable-next-line */
          `<script src='...'><\/script>`
        );
      },

文章在这里供参考： https://medium.com/@gaute.meek/how-to-add-a-script-tag-in-a-vue-component-34f57b2fe9bd

【讨论】：

【解决方案3】：

包含一个外部 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>

参考：How to include a tag on a Vue component

导入本地 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;
}

注意：检查 Vue.js 版本2.6.10

【讨论】：

谢谢。这很有帮助。工作得很好。参考资料也很有帮助。
从 SO 到现在的最佳复制过去！
MyComponent.vue 代码看起来有问题。 import 内的 export?
@untill 是的，你是对的。 import 应该放在export 之外。我相应地更新了。谢谢。
如果在挂载的钩子中定义为const plugin，我将如何访问methods属性中的外部JavaScript文件？

【解决方案4】：

尝试下载此脚本
import * from '{path}/mykey.js'.
或导入脚本
<script src="//api.myplugincom/widget/mykey.js"></script> 在<head> 中，在组件中使用全局变量。

【讨论】：

【解决方案5】：

对于您以浏览器方式引入的脚本（即带有标签），它们通常使某些变量全局可用。

对于这些，您不必导入任何内容。它们只是可用。

如果您使用的是 Webstorm（或任何相关的 JetBrains IDE）之类的东西，您可以添加 /* global globalValueHere */ 让它知道“嘿，这不是在我的文件中定义的，但它存在。”这不是必需的，但它会使“未定义”的波浪线消失。

例如：

/* global Vue */

是我从 CDN 中拉下 Vue 时使用的（而不是直接使用它）。

除此之外，您只需像往常一样使用它。

【讨论】：

感谢您的帮助。然而，这不起作用。我目前正在以“浏览器方式”导入脚本，脚本代码无法在 vue 组件中初始化。
应该是。如果不确切知道您正在使用什么，很难说，但是您可以从浏览器控制台访问任何东西吗？此外，加载顺序很重要。在尝试运行 Vue 代码之前，您必须确保加载了什么。只需将它的脚本标签放在带有 Vue 代码的标签之上就足够了。
您也可以在设置 -> 语言和框架 -> JavaScript -> 库中将外部库添加到 PHPStorm / WebStorm。然后你会得到代码提示 :) i.imgur.com/DVNXDpF.png
确实如此。 Webstorm 和朋友们也会在<script> 本身上给出一个波浪形的说法，说没有本地版本。你可以点击Alt+Enter 来做同样的事情。