Vue.js在组件中使用本地javascript文件函数：Uncaught TypeError:\uuu网页包\u导入的\u模块\uu 0\uuu。WriteMething不是一个函数

我正在尝试将本地JS文件导入Vue应用程序中的单个文件组件。我的应用程序是由vue CLI（3.8.2版）生成的框架

以下是我的相关代码片段（应用程序中的所有其他代码与生成的代码相同）：

/路径/to/app-vue/src/components/HelloWorld.vue 当我运行

npm run service

并在浏览器中导航到“/”时，控制台中会出现以下错误消息：

在中找不到导出“默认”（导入为“mod”） '-！../../node_modules/cache loader/dist/cjs.js？？ref--12-0！。/../node_modules/babel loader/lib/index.js！。/../node_modules/cache loader/dist/cjs？？ref--0-0！。/Module2.vue？vue&type=script lang=js

在browser DevTools控制台中，我得到以下堆栈跟踪：

Uncaught TypeError: _assets_js_foo__WEBPACK_IMPORTED_MODULE_0__.writeSomething is not a function
    at eval (Module2.vue?df9f:9)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Module2.vue?vue&type=script&lang=js& (app.js:1078)
    at __webpack_require__ (app.js:767)
    at fn (app.js:130)
    at eval (Module2.vue?35cf:1)
    at Module../src/components/Module2.vue?vue&type=script&lang=js& (app.js:3448)
    at __webpack_require__ (app.js:767)
    at fn (app.js:130)
    at eval (Module2.vue?6104:1)
    at Module../src/components/Module2.vue (app.js:3436)

---

如何将本地javascript文件加载到单个文件组件中，并使用加载的javascript中定义的函数（在组件中）？

您需要明确地导出该函数，并使用其名称导入该函数

模块2.vue foo.js 如果您使用的是typescript，请确保您可以导入js模块

您还可以导出默认模块

function writeSomething(el) {
  elem = window.document.getElementById(el);
  elem.innerHTML = 'Hello World!';
}


export default {
    writeSomething
}

并将其作为

import foo from '../assets/foo.js';

// ...
foo.writeSomething('#demo');

---

导出默认值应指定如下名称：

export default writeSomething;

命名导出

• 可以导出多个值
• 导入时必须使用导出的名称

默认导出

• 导出单个值
• 导入时可以使用任何名称

---

您可以查看有关命名导出和默认导出的更多信息

谢谢。当我进行您建议的修改时，我在浏览器开发控制台中遇到以下错误：

Module2.vue？df9f:8未捕获类型错误：_assets\u js\u foo\u WEBPACK\u IMPORTED\u MODULE\u 0\u Default.a.WriteMethoding不是函数

。我已经用您的su修改了我的问题仍然要继续。确保组件模块2有一个默认导出！（请看我回答中第一个代码块的最后一行。在模块1中，您正在导入模块2。但是模块2似乎没有导出组件。如果您希望脚本运行，它需要导出一些东西，甚至是“导出默认值{}”’。此外，您似乎想使用模块2中安装的钩子来调用“WriteMething”。SO和Vue论坛上有几十个关于如何实现这一点的答案，但没有找到任何答案。这是最好的一个，清晰易读，非常直截了当。很好，谢谢您，很高兴它帮助了@GeneBo！

Uncaught TypeError: _assets_js_foo__WEBPACK_IMPORTED_MODULE_0__.writeSomething is not a function
    at eval (Module2.vue?df9f:9)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Module2.vue?vue&type=script&lang=js& (app.js:1078)
    at __webpack_require__ (app.js:767)
    at fn (app.js:130)
    at eval (Module2.vue?35cf:1)
    at Module../src/components/Module2.vue?vue&type=script&lang=js& (app.js:3448)
    at __webpack_require__ (app.js:767)
    at fn (app.js:130)
    at eval (Module2.vue?6104:1)
    at Module../src/components/Module2.vue (app.js:3436)

import { writeSomething } from '../assets/js/foo.js';
writeSomething('#demo');

export default { ...

export function writeSomething(el) {
  elem = window.document.getElementById(el);
  elem.innerHTML = 'Hello World!';
}

function writeSomething(el) {
  elem = window.document.getElementById(el);
  elem.innerHTML = 'Hello World!';
}


export default {
    writeSomething
}

import foo from '../assets/foo.js';

// ...
foo.writeSomething('#demo');

export default writeSomething;