Vue Routerでわからない部分があります
Q&A
Closed
解決したいこと
Vue routerを動かしたい
例）
Vue routerをうごかしたいがエラーがでる。
このサイトと同じようにやっているのになぜかエラーがでる
発生している問題・エラー
[plugin:vite:import-analysis] Failed to resolve import "@/views/Home.vue" from "src/router.ts". Does the file exist?
/app/vite-project/src/router.ts:2:17
1 | import { createRouter, createWebHistory } from "vue-router";
2 | import Home from "@/views/Home.vue";
| ^
3 | export default createRouter({
4 | history: createWebHistory(),
ツリー構造
drwxr-xr-x 6 root root 4096 Aug 24 01:50 ../
-rw-r--r-- 1 root root 442 Aug 24 01:47 App.vue
drwxr-xr-x 2 root root 4096 Aug 24 00:46 assets/
drwxr-xr-x 2 root root 4096 Aug 24 00:46 components/
-rw-r--r-- 1 root root 193 Aug 24 01:48 main.ts
-rw-r--r-- 1 root root 410 Aug 24 01:49 router.ts
-rw-r--r-- 1 root root 1310 Aug 24 00:46 style.css
drwxr-xr-x 2 root root 4096 Aug 24 01:34 views/
-rw-r--r-- 1 root root 38 Aug 24 00:46 vite-env.d.ts
App.vue
<template>
<nav>
<router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> |
<router-link to="/contact">Contact</router-link>
</nav>
<main>
<router-view />
</main>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
router.ts
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
export default createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
component: Home,
},
{
path: '/about',
component: () => import('@/views/About.vue'),
},
{
path: '/contact',
component: () => import('@/views/Contact.vue'),
},
],
})
あとは
viewsの中にAbout.vue、Home.vue、Contact.vueがあり、
<template>
<h2>Home</h2>
</template>
があるだけです。
よろしくお願いします。
ほかにここの部分どうなっているとかあれば書きます。
環境はhttps://qiita.com/gabakugik/items/cded7e8aaa014025d8ba
で作っています
解決法
vite.config.jsの内容をコピーすればいける。
0
