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>

参考：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

进行检查

Answer 2

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

Answer 3

对于以浏览器方式引入的脚本（即带有标签），它们通常会在全局范围内提供一些变量。

对于这些，您不必进口任何东西。他们只是可用。

如果你使用像Webstorm（或任何相关的JetBrains IDE）这样的东西，你可以添加/* global Vue */让它知道＆＃34;嘿，这不是在我的文件中定义的，但它存在。＆＃34;这不是必需的，但是它会使＆＃34; undefined＆＃34;波浪线消失了。

例如：

{{1}}

当我从CDN中拉下Vue（而不是直接使用它）时，我就会使用

。

除此之外，你可以像往常一样使用它。

Answer 4

我想在我的组件上嵌入一个脚本并尝试上述所有操作，但是该脚本包含NaN。然后，我找到了一篇关于中型的简短文章，内容涉及使用postscribe，这很容易解决，并解决了问题。

connected_ssid = subprocess.check_output("powershell.exe (get-netconnectionProfile).Name", shell=True).strip()

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

document.write

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

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

4 个答案:

包含外部JavaScript文件

导入本地JavaScript文件