tyoma_koder
@tyoma_koder

Почему не работает однофайловый компонент?

В подключении JS файла указал type="module"
Компонент
<template>
    <div>
        <p class="single-file-component">{{txt}}</p>
    </div>
</template>

<script>
    export default{
        name: 'componentName',
        data: function(){
            return{
                txt: 'Текст файлового компонента'
            }
        }
    }
</script>

JS
import Vue from 'vue'
import componentName from './components/template.vue'
Vue.component('file-component', componentName)

Выдаёт ошибку Uncaught SyntaxError: Unexpected identifier для обоих импортов
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
Aetae
@Aetae
Тлен
Ты путаешь тёплое с мягким.
ES-modules - это стандарт javascript и работает он с файлами .js. Ни о каких .vue он знать не знает. Нельзя просто написать module и ожидать что оно само заработает.

Для отднофайловых компонентов сборка в любом случае нужна. Сборщики используют loader'ы, которые собственно и творят всю магию. Когда ты пишешь
import componentName from './components/template.vue'
сборщик находит в конфиге специальный loader для .vue и запускает его, тот обрабатывает файл и выдаёт в результате валидный js, который уже в свою очередь и импортируется. Вне сборщиков, в чистом браузере, поддержки loader'ов само собой (пока?) нет.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы