我正在一个需要使用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组件中使用它？...
尝试将（外部）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，可以通过以下方式导入它：
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
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句