如何将.js文件中的Vue对象导入html答案

【问题标题】：How to import Vue object inside .js file to html如何将.js文件中的Vue对象导入html
【发布时间】：2019-07-17 08:07:22
【问题描述】：

我正在使用 Vue.js 进行一些数据绑定和数据过滤。我在 .js 文件中创建了一个 Vue 对象，我想导出它，然后从我的 html 中导入它。

我尝试使用 export default { testObject }; 导出，然后以 html 格式导入（我的文件位于名为 js/ 的文件夹中）。

<script type="module" src="js/testFile.js">

    var testObject = require('./js/testFile');

</script>

这似乎不起作用。

有没有办法做到这一点？

【问题讨论】：

【解决方案1】：

使用现代 Javascript（export default 和 ES 模块）功能的唯一方法是使用构建工具。

幸运的是 Vue 已经有了这个，而且它也有单文件组件。

【讨论】：

【解决方案2】：

您正在使用 ES6 模块语法导出并尝试使用 commonjs 模块导入。

你想导入这样的东西：

<script type="module">
import TestObject from '/js/testFile'
</script>

请参阅import documentation on MDN 了解更多信息。

【讨论】：

我也试过了，但是没用。当我尝试在控制台中记录我的对象时，它没有显示任何内容
脚本标签中也不需要src="js/testFile.js" 属性。这可能是导致问题的原因，因为我不相信您可以同时拥有 src 属性和内容。
@memeister 我刚刚意识到您可能已尝试直接从控制台记录对象，这将不起作用，因为控制台无法访问模块内的变量，除非您明确将它们添加到全局范围。如果您在导入对象后在模块脚本标签中添加console.log，那么它应该可以工作。