My vue-cli version is 4.5.15, but it cannot resolve @ as ./src and all paths using '@' are not found. Why did this happen and how could I solve it?
3 Answers
Your statement tries to import a file which does not exist: import Layout from '@/layout' would work with layout.vue or layout/index.js, neither of which is present.
To fix this, you can either import the single components with their full path (as mentioned in @wittgenstein's comment): import Footer from '@/layout/Footer'
Or you can create layout/index.js which exposes all components inside the directory:
import Footer from './Footer.vue'
import Header from './Header.vue'
// ...
export default {
Footer, Header, // ...
}
Then you can import components like that: import { Footer, Header } from '@/layout'
2 Comments
Estus Flask
layout.vue won't necessarily work, in some setups .vue extension is required in import
SNORLAX
I have known what the problem is. It's because I used 'Index.vue' as the name before and git is insensitive to capital. So it cannot find the path. Vue has supported ``` import xxx from "@/xxx" ``` if the name of your file you want to import is "index.vue". Thanks a lot for your answer!
It is not possible to import a folder, you will have to import a single file from the layout folder:
import Footer from "@/Layout/Footer.vue"
import Header from "@/Layout/Header.vue"
import Index from "@/Layout/Index.vue"
import Sidebar from "@/Layout/Sidebar.vue"
import Sidebar2 from "@/Layout/Sidebar2.vue"
If you want to import every file, you will have to this all manually, because you cannot import a folder.
Hope this will work for you!
1 Comment
SNORLAX
I have known what the problem is. It's because I used 'Index.vue' as the name before and git is insensitive to capital. So it cannot find the path. Vue has supported ``` import xxx from "@/xxx" ``` if the name of your file you want to import is "index.vue". Thanks a lot for your answer!
I have known what the problem is. It's because I used 'Index.vue' as the name before and git is insensitive to capital. So it cannot find the path. Vue has supported
import xxx from "@/xxx"
if the name of your file you want to import is "index.vue".
Thanks a lot for your answers!
import Footer from '@/layout/Footer'? I think you can't import a folder with multiple components, or am I wrong?