如何在 vuejs 组件中包含 js 文件？

Posted 2023-02-23

【中文标题】如何在 vuejs 组件中包含 js 文件？

【英文标题】：How to include js files on a vuejs component?

【发布时间】：2018-06-28 10:10:39

【问题描述】：

我刚开始研究如何用vuejs框架做一个laravel api，我有很多疑问。其中一个是：如何在特定的 vue 组件中包含 js 文件？现在，我在我的 vue 客户端的索引上导入我所有的 js 文件，但我认为它是如何在其特定的 vue 组件上加载特定的 js 文件。我已经尝试过require('assets/path/to/jsfile')、import('assets/path/to/jfsile')，但没有任何效果。

例如：

在我的文件夹中，我有这样的结构：myapp -> static -> myjsfolder -> myjsfile

在我的 vue 组件中，我想导入我的 myjsfile。我使用的管理模板是 AdminLTE，laravel 作为后端，webpack 作为 vuejs 上的客户端。

【参考方案1】：

你的 js 文件有导出什么东西吗？

如果是这样，请尝试使用：

import * as Something from 'assets/path/to/jsfile'

路径将相对于组件，因此您可能需要使用 ./ 或 ../path 例如。

编辑：以下是否有效？假设正在使用单个文件组件：

<script type="text/javascript" src="some/js/file.js"></script>
<script type="text/ecmascript-6">
    export default 
        ...
    
</script>

在teste.js 内添加一个函数：

function printToConsole() 
    console.log('working')

然后稍后在您的组件中调用printToConsole()。

或使用 IIFE

(function () 
    console.log('working')
 )()

【讨论】：

不是。其中一些不出口任何东西。那就是问题所在。由于它们什么都不导出，我必须将它们导入我的索引。所以，我所有的 js 文件都在 index.html 上。太烂了！

你能在一个普通的<script>标签中要求它们吗？

不，即使我将完整路径放入文件，我的 vue 组件也不会执行它。

可以发teste.js的内容吗？您需要将其内容包装在立即调用的函数中以使其立即执行。

好的，然后没有调用脚本。您要么需要将其包装在一个函数中并调用该函数，要么将内容包装在一个立即调用的函数中，例如(function () console.log('working'))()