使用vite搭建vue3項目(二) 引入vue-router

引入vue-router

npm install vue-router@next --save

 

在src目錄下創建router文件夾，在文件夾下創建index.ts

import {createRouter, RouteRecordRaw, Router, createWebHistory} from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: () => import('@/views/Home.vue'),
        meta: {
            title: '首頁'
        }
    }
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

創建 views/Home.vue

<template>
  <HelloWorld :msg="msg"></HelloWorld>
</template>

<script lang="ts">
import HelloWorld from "@/components/HelloWorld.vue"
import { defineComponent } from "vue"
export default defineComponent({
  name: "Home",
  components: { HelloWorld },
  setup() {
    return {
      msg: "hello World",
    }
  }
})
</script>

在main.ts中引入router

import {createApp} from 'vue'
import router from './router/index'
import App from './App.vue'

createApp(App).use(router).mount('#app')

將App.vue中內容替換 

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view />
</template>

<script>
export default {
  name: 'App',
  setup() {

  }
}
</script>

運行報錯如下，router找不到路徑

下午11:42:12 [vite] Internal server error: Failed to resolve import "@/views/Home.vue" from "src\router\index.ts". Does the file exist?
  Plugin: vite:import-analysis
  File: D:/workspace/test/element-plus-ts/src/router/index.ts
  4  |      path: "/home",
  5  |      name: "Home",
  6  |      component: () => import("@/views/Home.vue"),

那么需要修改vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'   // 需安裝此模塊

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

安裝 path模塊

npm install --save-dev @types/node

不行，則換cnpm安裝

cnpm install --save-dev @types/node

 

配置完成，運行

 npm run dev