Как удалить расширение .vue из импорта при использовании TypeScript в Vue.JS?
Я создал проект с vue-cli3 и включил TypeScript
Мой src / app.vue:
<template>
<div id = "app">
<hello-world msg = "test"/>
</div>
</template>
<script lang = "ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld';
@Component({
components: { HelloWorld },
})
export default class App extends Vue {}
</script>
компилятор выдает ошибку «Не удается найти модуль '@ / components / HelloWorld'»;
Компонент HelloWorld существует.
Однако, если я удалю lang = "ts" или добавлю расширение .vue, все компилируется нормально. В моем tsconfig.json у меня есть
"paths": {
"@/*": [ "src/*" ]
},
Это проблема с tsconfig.json или чем-то еще?
Ответы 6
Эта строка import HelloWorld from '@/components/HelloWorld'; должна быть import HelloWorld from '@/components/HelloWorld.vue.
Потому что компилятор думает, что @/components/HelloWorld - это файл .ts или .js, но его не существовало.
Некоторое время назад я изучал ту же проблему; единственный ответ, который я нашел в нескольких местах: нельзя. Сохраните расширение .vue. В любом случае не имеет большого значения
Это уже старый вопрос, но кажется, что вам нужно добавить shim-vue.d.ts
//shims-vue.d.ts
declare module "*.vue" {
import Vue from 'vue';
export default Vue;
}
Подробнее см. Здесь: Что делает файл shims-tsx.d.ts в проекте Vue-Typescript?
В корневой папке источников у вас, вероятно, есть файл с именем shims-vue.d.ts с таким содержимым:
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
Этот файл сообщает компилятору Typescript, что все файлы, оканчивающиеся на .vue, имеют тип Vue. В противном случае эти файлы не имеют типа, и Typescript не сможет с ними работать.
Вот почему вы необходимость расширение .vue: если вы удалите его, Typescript не знает тип файла и не сможет скомпилировать. Короче говоря, ответ таков: ты не можешь удаляет расширение.
Более продвинутый ответ:
Теоретически вы жестяная банка удаляете расширение, но вам нужно будет объявить прокладку модуля с другим выражением. Например, вы можете сообщить Typescript, что все файлы в папке имеют тип Vue. Однако это намного хуже, чем просто использовать расширение .vue, которое рекомендуется по умолчанию.
Верно, чтобы добавить .vue в конце каждого компонента vuejs при импорте.
`import HelloWorld from '@/components/HelloWorld';
должно быть:
import HelloWorld from '@/components/HelloWorld.vue'
вопрос спрашивает "как удалить расширение .vue"
Вам необходимо установить пакет awesome-typescript-loader, затем вы сможете импортировать файлы без расширения .vue. Если вы используете компонент SCF, как и вы, убедитесь, что у вас установлен пакет vue-loader и файл shims-vue.d.ts.
Вы можете попробовать добавить этот код в shims-vue.d.ts, если у вас есть только файлы .vue в папке components.
declare module '@/components/*' {
import Vue from 'vue'
export default Vue
}
я сказал то же самое в своем вопросе. вот почему я спрашиваю "как удалить расширение .vue"