I created a project with vue-cli3 and included TypeScript
My 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>
the compiler throwing an error in "Cannot find module '@/components/HelloWorld'";
The component HelloWorld exists.
However, if I remove the lang="ts"
or add the .vue
extension then everything compiles fine. In my tsconfig.json , i have
"paths": {
"@/*": [ "src/*" ]
},
Is it an issue with tsconfig.json
or something else?
In your sources root folder you probably have a file named shims-vue.d.ts
with contents like these:
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
What this file does is tell the Typescript compiler that all files ending in .vue
have the Vue
type. Otherwise, those files have no type and Typescript cannot work with them.
This is why you need the .vue
extension: if you remove it, Typescript doesn't know the type of the file and can't compile. So, in short, the answer is that you can't remove the extension.
More advanced answer :
Theoretically, you can remove the extension, but you would need to declare the module shim with a different expression. For example, you could tell Typescript that all the files in a folder have the Vue type. This is, however, way worse than just shimming the .vue
extension, which is the recommended default.
It's already an old question but it seems that you need to add the shim-vue.d.ts
//shims-vue.d.ts
declare module "*.vue" {
import Vue from 'vue';
export default Vue;
}
Can find more here : What does the shims-tsx.d.ts file do in a Vue-Typescript project?
You need to install awesome-typescript-loader
package, then you can import without .vue
extension. If you are using SCF component like you do, insure you have vue-loader
package installed and shims-vue.d.ts
file.
You could try adding this code into shims-vue.d.ts
, if you have only .vue
files inside your components
folder
declare module '@/components/*' {
import Vue from 'vue'
export default Vue
}
This line import HelloWorld from '@/components/HelloWorld';
shoud be import HelloWorld from '@/components/HelloWorld.vue
.
Because the compiler think the @/components/HelloWorld
is a .ts
or .js
file, but it didn't exist.
True to add .vue
at the end of every vuejs component when is imported.
`import HelloWorld from '@/components/HelloWorld';
should be:
import HelloWorld from '@/components/HelloWorld.vue'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.