Vue.js 在组件中使用本地 javascript 文件函数：Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__.writeSomething is

Posted 2023-02-19

【中文标题】Vue.js 在组件中使用本地 javascript 文件函数：Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__.writeSomething is not a function

【英文标题】：Vue.js using local javascript file functions in component: Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__.writeSomething is not a function

【发布时间】：2019-10-31 11:58:54

【问题描述】：

我正在尝试将本地 JS 文件导入 Vue 应用程序中的单个文件组件。我的应用是由 vue-CLI (ver 3.8.2) 生成的脚手架。

这是我的相关代码sn-ps（应用程序中的所有其他代码与生成的代码相比没有变化）：

/path/to/app-vue/src/components/HelloWorld.vue

<template>
  <div class="hello">
    <Module1/>
  </div>
</template>

<script lang="ts">
import  Component, Prop, Vue  from 'vue-property-decorator';
import Module1 from './Module1.vue';

@Component(
  components: 
    Module1,
  
)
export default class HelloWorld extends Vue 
  @Prop() private msg!: string;


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

/path/to/vue-app/src/components/Module1.vue

<template>
    <div class="module1">
        Module2
    </div>
</template>

<script>
import  Component, Prop, Vue  from 'vue-property-decorator';
import Module2 from './Module2.vue';

@Component(
  components: 
    Module2,
  ,
)
export default class Module1 extends Vue 

</script>

/path/to/vue-app/Module2.vue

<template>
    <div id='demo'>
    </div>
</template>

<script>
import foo from '../assets/js/foo';

foo.writeSomething('#demo');
</script>

/path/to/vue-app/src/assets/js/foo.js

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


export default 
    writeSomething

当我在浏览器中运行 npm run serve 并导航到“/”时，我在控制台中收到以下错误消息：

"export 'default' (imported as 'mod') 在 '-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../ ../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ Module2.vue?vue&type=script&lang=js&'

在浏览器 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 中定义的函数（在组件内）？

【参考方案1】：

您需要明确export 函数并使用其名称导入它。

Module2.vue

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

export default  ...

foo.js

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

如果您使用的是 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');

【讨论】：

谢谢。当我进行您建议的修改时，我在浏览器开发控制台中收到以下错误：Module2.vue?df9f:8 Uncaught TypeError: _assets_js_foo__WEBPACK_IMPORTED_MODULE_0___default.a.writeSomething is not a function。不过，我已经根据您的建议修改了我的问题。

确保您的组件模块 2 具有默认导出！ （查看我的回答中第一个代码块的最后一行。在 Module1 中，您正在导入 Module2。但似乎 Module2 没有导出组件。如果您希望脚本运行，它甚至需要导出一些东西'export default '。另外，看起来你想使用 Module2 中的挂载钩子来调用'writeSomething'

在 SO 和 Vue 论坛上有几十个关于如何做到这一点的答案，但没有一个能够奏效。这是最好的一个，清晰易读，非常直接。不错，谢谢

很高兴它帮助了@GeneBo！

【参考方案2】：

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

export default writeSomething;

命名导出

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

默认导出

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

你可以看到更多关于命名导出和默认导出here