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

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

以前，这是在标记中处理的，如下所示：

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

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

---

…

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

对于这些，您不必导入任何内容。他们会随时准备好的

如果您使用的是Webstorm（或任何相关JetBrains IDE），您可以添加

/*global globalValueHere*/

，让它知道“嘿，我的文件中没有定义，但它存在。”这不是必需的，但会使“未定义”的曲线消失

例如：

/* global Vue */

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

---

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

尝试下载此脚本

从“{path}/mykey.js”导入*
或导入脚本


在
中，在组件中使用全局变量。
包括一个外部JavaScript文件
<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>

尝试将（外部）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>

您可以在mykey.js中导出变量或函数：

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

注意：检查Vue.js版本
2.6.10
我想在我的组件上嵌入一个脚本，并尝试了上面提到的所有操作，但该脚本包含
文档。编写
。然后我在媒体上找到了一篇关于使用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>`
        );
      },

从“postscribe”导入postscribe；
导出默认值{
名称：“MyTemplate”，
挂载：函数（）{
后记(
“#要点”，
/*eslint禁用下一行*/
``
);
},

本文仅供参考：
您能否更精确地说明您正在使用的工具
npm
/
webpack
..以及您需要哪个库，内部/外部？这是一个外部库，我正在使用laravel mix进行编译。如果可能，我希望任何导入逻辑都是特定于vue组件的：）
从路径导入某些内容
。路径是解析a没有编译时间，所以您需要引用本地目录中的文件。而不是URI的结尾。什么错误消息？如果您想使用库中包含的方法，您需要从“//api.myplugincom/widget/mykey.js”中将import
import*命名为myModule；
另外，您的
路径
是错误的。我感谢您的帮助。这不会有任何问题但是rk。我目前正在以“浏览器方式”导入脚本，并且脚本代码无法在vue组件中初始化。应该是这样。在不确切知道您正在使用什么的情况下，很难说，但是您是否可以从浏览器控制台访问任何内容？此外，加载顺序也很重要。您必须确保加载了什么内容在你尝试运行你的Vue代码之前。只要把它的脚本标签放在带有Vue代码的上面就足够了。你也可以在设置->语言与框架->JavaScript->库中将外部库添加到PHPStorm/WebStorm中。然后你会得到代码提示：）的确如此。WebStorm和朋友们也会在
itse上做一个小动作如果说没有本地版本，你可以点击
Alt+Enter
来做同样的事情。谢谢。这很有帮助。效果很好。参考文献也很有帮助。最好从现在开始复制过去！MyComponent.vue代码看起来有错。
导出中的
导入
？@直到是，你是对的。
导入
应该是正确的t outside
export
。我相应地更新了。谢谢。如果在挂载的钩子内将外部JavaScript文件定义为
const-plugin
，我将如何访问methods属性中的外部JavaScript文件？
npm i postscribe --save

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