Vue.js с использованием локальных файловых функций javascript в компоненте: Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0 __. WriteSomething не является функцией

Question

Я пытаюсь импортировать локальный файл JS в один компонент файла в приложении Vue. Мое приложение - это скаффолд, сгенерированный vue-CLI (версия 3.8.2).

Вот мои соответствующие фрагменты кода (весь другой код в приложении не отличается от сгенерированного кода):

/ путь / к / приложение-вю / SRC / компоненты / 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>

/ путь / к / вю-приложение / SRC / компоненты / 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>

/ путь / к / вю-приложение / Module2.vue

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

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

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

/ путь / к / вю-приложение / SRC / активы / 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 / кэш-погрузчик / DIST / cjs.js ?? исх -! 12-0 ../../ node_modules / столпотворение-погрузчик / Библиотека / index.js ../ ../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ Module2.vue? вю и тип = сценарий & 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 в компонент Single File и использовать функции, определенные в загруженном Javascript (внутри компонента)?

Answer 1

При экспорте по умолчанию следует указать имя, как показано ниже:

export default writeSomething;

Именованные экспорты

• Может экспортировать несколько значений
• ДОЛЖНО использоватьэкспортированное имя при импорте

Экспорт по умолчанию

• Экспорт одного значения
• Можно использовать любое имя при импорте

Подробнее об именном экспорте и экспорте по умолчанию здесь

Answer 2

Вам необходимо явно 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!';
}

Если вы используете машинопись, убедитесь, что вы можете импортировать 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');