导入 javascript 文件以在 vue 组件中使用
Posted
技术标签:
【中文标题】导入 javascript 文件以在 vue 组件中使用【英文标题】：Importing javascript file for use within vue component 【发布时间】：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 是错误的
【参考方案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 来做同样的事情。以上是关于导入 javascript 文件以在 vue 组件中使用的主要内容，如果未能解决你的问题，请参考以下文章