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

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

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

/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并在浏览器中导航到“/”，我在控制台中收到以下错误消息：

“在以下位置找不到导出‘default’（导入为‘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（组件内）中定义的函数？

你需要明确地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');