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
问题描述
我正在尝试将本地 JS 文件导入到 Vue 应用程序中的单个文件组件中.我的应用是 vue-CLI (ver 3.8.2) 生成的脚手架.
这是我的相关代码片段(应用程序中的所有其他代码与生成的代码没有变化):
/path/to/app-vue/src/components/HelloWorld.vue
<div class="你好"><模块 1/></模板><script lang="ts">从'vue-property-decorator'导入{组件，道具，Vue}；从'./Module1.vue'导入Module1；@成分({成分: {模块1，}})导出默认类 HelloWorld 扩展 Vue {@Prop() 私人味精！:字符串；}<!-- 添加scoped"属性以将 CSS 限制为仅适用于该组件 --><样式范围></风格>
/path/to/vue-app/src/components/Module1.vue
<div class="module1">模块2</模板><脚本>从'vue-property-decorator'导入{组件，道具，Vue}；从'./Module2.vue'导入Module2；@成分({成分: {模块2，},})导出默认类 Module1 扩展 Vue {}
/path/to/vue-app/Module2.vue
<div id='演示'></模板><脚本>从 '../assets/js/foo' 导入 foo；foo.writeSomething('#demo');
/path/to/vue-app/src/assets/js/foo.js
function writeSomething(el) {elem = window.document.getElementById(el);elem.innerHTML = '你好世界！';}导出默认{写一些东西}当我运行 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 控制台中，我得到以下堆栈跟踪:
未捕获的类型错误:_assets_js_foo__WEBPACK_IMPORTED_MODULE_0__.writeSomething 不是函数在 eval (Module2.vue?df9f:9)在 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)在 __webpack_require__ (app.js:767)在 fn (app.js:130)在 eval (Module2.vue?35cf:1)在 Module../src/components/Module2.vue?vue&type=script&lang=js&(app.js:3448)在 __webpack_require__ (app.js:767)在 fn (app.js:130)在 eval (Module2.vue?6104:1)在 Module../src/components/Module2.vue (app.js:3436)如何将本地 javascript 文件加载到单个文件组件中，并使用在加载的 Javascript 中(组件内)定义的函数?
您需要明确地export 函数并使用其名称导入它.
Module2.vue
import { writeSomething } from '../assets/js/foo.js';writeSomething('#demo');导出默认 { ...foo.js
导出函数 writeSomething(el) {elem = window.document.getElementById(el);elem.innerHTML = '你好世界！';}如果您使用的是 typescript，请确保您可以导入 js 模块
您也可以导出默认模块
function writeSomething(el) {elem = window.document.getElementById(el);elem.innerHTML = '你好世界！';}导出默认{写一些东西}并将其导入为
从'../assets/foo.js'导入foo；//...foo.writeSomething('#demo');I am trying to import a local JS file into a single file component in a Vue application. My application is a scaffold generated by vue-CLI (ver 3.8.2).
Here are my relevant code snippets (all other code in application is unchanged from generated code):
/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
}
When I run npm run serve and navigate to '/' in the browser, I get the following error messages in the console:
"export 'default' (imported as 'mod') was not found in '-!../../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&'
And in the browser DevTools console, I get the following stack trace:
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)
How do I load local javascript files into a Single File Component, and use functions defined in the loaded Javascript (within the component)?
You need to explicitely export the function and import it using its name.
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!';
}
If you are using typescript, make sure that you can import js modules
you can also export a default module
function writeSomething(el) {
elem = window.document.getElementById(el);
elem.innerHTML = 'Hello World!';
}
export default {
writeSomething
}
and import it as
import foo from '../assets/foo.js';
// ...
foo.writeSomething('#demo');
这篇关于Vue.js 在组件中使用本地 javascript 文件函数:Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__.writeSomething is not a function的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
