导入 javascript 文件以在 vue 组件中使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48426972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Importing javascript file for use within vue component
提问by AnchovyLegend
I am working on a project that requires using a js plugin. Now that we're using vue and we have a component to handle the plugin based logic, I need to import the js plugin file within the vue component in order to initialize the plugin.
我正在开发一个需要使用 js 插件的项目。现在我们正在使用 vue 并且我们有一个组件来处理基于插件的逻辑，我需要在 vue 组件中导入 js 插件文件以初始化插件。
Previously, this was handled within the markup as follows:
以前，这是在标记中处理的，如下所示：
<script src="//api.myplugincom/widget/mykey.js
"></script>
This is what I tried, but I am getting a compile time error:
这是我尝试过的，但出现编译时错误：
MyComponent.vue
我的组件.vue
import Vue from 'vue';
import * from '//api.myplugincom/widget/mykey.js';
export default {
data: {
My question is, what is the proper way to import this javascript file so I can use it within my vue component? ...
我的问题是，导入这个 javascript 文件以便我可以在我的 vue 组件中使用它的正确方法是什么？...
回答by Yuci
Include an external JavaScript file
包含外部 JavaScript 文件
Try including your (external) JavaScript into the mounted hook of your Vue component.
尝试将您的（外部）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>
Reference: How to include a tag on a Vue component
Import a local JavaScript file
导入本地 JavaScript 文件
In the case that you would like to import a local JavaScript in your Vue component, you can import it this way:
如果您想在 Vue 组件中导入本地 JavaScript，可以通过以下方式导入：
MyComponent.vue
我的组件.vue
<script>
import * as mykey from '../assets/js/mykey.js'
export default {
data() {
return {
message: `Hello ${mykey.MY_CONST}!` // Hello Vue.js!
}
}
}
</script>
Suppose your project structure looks like:
假设您的项目结构如下所示：
src
- assets
- js
- mykey.js
- components
MyComponent.vue
And you can export variables or functions in mykey.js:
您可以在 mykey.js 中导出变量或函数：
export let myVariable = {};
export const MY_CONST = 'Vue.js';
export function myFoo(a, b) {
return a + b;
}
Note: checked with Vue.js version 2.6.10
注意：使用 Vue.js 版本检查 2.6.10
回答by JJJ
try to download this scriptimport * from '{path}/mykey.js'.
or import script<script src="//api.myplugincom/widget/mykey.js"></script>in <head>, use global variable in your component.
尝试下载此脚本import * from '{path}/mykey.js'。
或 import script <script src="//api.myplugincom/widget/mykey.js"></script>in <head>，在组件中使用全局变量。
回答by samanime
For scripts you bring in the browser way (i.e., with tags), they generally make some variable available globally.
对于您以浏览器方式（即带有标签）引入的脚本，它们通常使某些变量全局可用。
For these, you don't have to import anything. They'll just be available.
对于这些，您不必导入任何内容。他们只会有空。
If you are using something like Webstorm (or any of the related JetBrains IDEs), you can add /* global globalValueHere */to let it know that "hey, this isn't defined in my file, but it exists." It isn't required, but it'll make the "undefined" squiggly lines go away.
如果您使用的是 Webstorm（或任何相关的 JetBrains IDE）之类的东西，您可以添加/* global globalValueHere */让它知道“嘿，这在我的文件中没有定义，但它存在。” 它不是必需的，但它会使“未定义”的波浪线消失。
For example:
例如：
/* global Vue */
is what I use when I am pulling Vue down from a CDN (instead of using it directly).
是我从 CDN 拉下 Vue 时使用的（而不是直接使用它）。
Beyond that, you just use it as you normally would.
除此之外，您只需像往常一样使用它。
回答by ttemple
I wanted to embed a script on my component and tried everything mentioned above, but the script contains document.write. Then I found a short article on Medium about using postscribe which was an easy fix and resolved the matter.
我想在我的组件上嵌入一个脚本并尝试了上面提到的所有内容，但脚本包含document.write. 然后我在 Medium 上找到了一篇关于使用 postscribe 的简短文章，这是一个简单的解决方法并解决了这个问题。
npm i postscribe --save
Then I was able to go from there. I disabled the useless escape from eslint and used #gist as the template's single root element id:
然后我就可以从那里去了。我禁用了 eslint 的无用转义，并使用 #gist 作为模板的单个根元素 ID：
import postscribe from 'postscribe';
export default {
name: "MyTemplate",
mounted: function() {
postscribe(
"#gist",
/* eslint-disable-next-line */
`<script src='...'><\/script>`
);
},
The article is here for reference: https://medium.com/@gaute.meek/how-to-add-a-script-tag-in-a-vue-component-34f57b2fe9bd
文章在这里供参考：https: //medium.com/@gaute.meek/how-to-add-a-script-tag-in-a-vue-component-34f57b2fe9bd
