main.ts 引入 VueRouter，之后  => 通过 <RouterLink to="${path}"> 配置指定元素的跳转路径 path  => 访问中心路由 ts 文件，根据 path 找到相关的组件以及 <RouterView> 区  => 将组件展示在相应的 <RouterView> 区

/* 引入 VueRouter */import router from './router'/* 使用 VueRouter 做路由 */app.use(router)

<!-- 菜单组件 --><template>    <el-menu default-active="1" class="el-menu-vertical-demo" router>        <!-- index 指定跳转路径 -->        <el-menu-item index="/">            <el-icon><icon-menu /></el-icon>            <span>首页</span>        </el-menu-item>        <el-menu-item index="/bookList">            <el-icon><document /></el-icon>            <span>书籍管理</span>        </el-menu-item>    </el-menu></template>
<script lang="ts" setup>import { Document, Menu as IconMenu } from '@element-plus/icons-vue'import { RouterLink } from 'vue-router'</script>

        <RouterLink to="/bookList">            <el-menu-item index="/bookList">                <el-icon><document /></el-icon>                <span>书籍管理</span>            </el-menu-item>        </RouterLink>

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({  history: createWebHashHistory(import.meta.env.BASE_URL),  routes: [    /* 登录页 path => LoginView.vue 展示在根组件的 <RouterView> 区 */    {      path: '/login',      name: 'login',      component: () => import('@/views/login/LoginView.vue')    },    /* 其他路由 */    {      path: '/',      name: 'layout',      /* 嵌套路由，当访问 children 中的 path 时，相关的组件展示在父组件（此处是 layout/index.vue）的 <RouterView> 区 */      component: () => import('@/layout/index.vue'),      children: [{        path: '/',        name: 'home',        component: () => import('@/views/home/HomeView.vue'),      }, {        path: '/bookList',        name: 'bookList',        component: () => import('@/views/book/BookListView.vue')      }      ]    }  ]})
export default router

<template>    <el-container class="layout-container">        ...        <el-main>            <!-- 路由展示区 -->            <RouterView />        </el-main>        ...    </el-container></template>

import router from "./index";import { useUserStore } from '@/stores/user/user'
/* 白名单 */const whiteList = ['/login']/* userStore */// to - 要去的导航// from - 当前的导航// next - 函数，可指定去往任意的导航router.beforeEach((to, from, next) => {  const userStore = useUserStore()  if(userStore.getToken()) {    /* 如果 token 存在 */    if(to.path === '/login') {      /* 跳转到首页 */      next('/')    } else {      /* 继续跳转到 to */      next()    }  } else {    /* 如果 token 不存在 */    if(whiteList.includes(to.path)) {      next()    } else {      next('/login')    }  }})

/* main.ts 引入路由守卫 */import '@/router/permission'

/* 引入状态管理器Pinia创建函数 */import { createPinia } from 'pinia'/* 使用 pinia 做状态管理 */app.use(createPinia())

import { defineStore } from 'pinia'import { TOKEN_DURATION_KEY, TOKEN_DURATION } from '@/utils/constants'// 命名规范：建议使用 useXxxStoreexport const useUserStore = defineStore('user', () => {    // 在 Setup Store 中:    // ref() 就是 state 属性    // computed() 就是 getters    // function() 就是 actions    function saveToken(token: string) {        localStorage.setItem('token_vue_springboot', token)    }
    function getToken(): string | null {        return localStorage.getItem('token_vue_springboot')    }
    function removeToken() {        localStorage.removeItem('token_vue_springboot')    }
    /* 登录时设置 */    function saveCurrentTokenTime() {        localStorage.setItem(TOKEN_DURATION_KEY, Date.now().toString())    }
    function getTokenTime(): number | null {        const tokenTime = localStorage.getItem(TOKEN_DURATION_KEY)        if (tokenTime) {            return Number(tokenTime)        }        return null    }
    function removeTokenTime() {        localStorage.removeItem(TOKEN_DURATION_KEY)    }
    /* 判断登录 token 时间是否过期 */    function tokenTimeIsExpire(): boolean {        const tokenTime = getTokenTime();        /* 如果不存在，则表示未登录，与过期等价，需要重新登录 */        if (!tokenTime) {            return true        }        return Date.now() - tokenTime > TOKEN_DURATION    }
    /* 暴露方法 */    return { saveToken, getToken, removeToken, saveCurrentTokenTime, getTokenTime, removeTokenTime, tokenTimeIsExpire }})

import { login as userLogin } from '@/api/login'import { useUserStore } from '@/stores/user/user'import router from '@/router'import type { Ref } from 'vue'
export function login(loginForm: Ref<LoginUser>) {    /* 使用 Pinia Store */    const userStore = useUserStore()    /* 定义函数 */    async function loginTrue() {        await userLogin(loginForm.value).then(resp => {            /* 保存 token 到浏览器缓存 */            userStore.saveToken(resp.data.token)            /* 保存当前时间 tokenTime 到浏览器缓存 */            userStore.saveCurrentTokenTime()            /* 跳转到首页 */            router.replace('/')        })    }    /* 调用登录函数 */    loginTrue()}

/* 封装 axios 对象 */import axios from "axios";import { useUserStore } from '@/stores/user/user'import { logout } from '@/utils/login'
/* 创建请求对象，填入全局配置参数 */const axiosService = axios.create({    baseURL: import.meta.env.VITE_DOMAIN_URL_VUE_BOOT, // 根据环境读取不同的文件，具体见“环境配置”部分    timeout: 3000})
/* 请求前拦截器 */axiosService.interceptors.request.use(function (config) {    // 在发送请求之前做些什么，eg.token校验；token传递到header，进行免登操作等    /* 如果 token 过期 */    const userStore = useUserStore()    if (userStore.tokenTimeIsExpire()) {        logout()        return Promise.reject(new Error('token expired'))    }    return config;}, function (error) {    // 对请求错误做些什么    return Promise.reject(error);})
/* 响应拦截器，拦截之后，业务方法基于该返回进行数据处理（此处可进行服务端返回数据的统一处理，例如，统一报错等） */axiosService.interceptors.response.use(function (response) {    // 2xx 范围内的状态码都会触发该函数。    // return response.data    return response}, function (error) {    // 超出 2xx 范围的状态码都会触发该函数。    return Promise.reject(error);})
export default axiosService

/* 封装 login 相关api */import axiosService from './baseRequest'// 登录export function login(data: {}) {    return axiosService.request({        url: 'user/login',        method: 'post',        data: data    })}// 退出export function logout(data: {}) {    return axiosService.request({        url: 'user/logout',        method: 'post',        data    })}

// 定义Book接口export interface Book {    id: number,    name: string}
// 定义查询请求参数接口export interface BookRequest {    /* 模糊查询 */    name: string,    pageNum: number,    pageSize: number}

// 导入外部接口定义import type { Book,BookRequest } from '@/types/book'
// 构造列表查询数据const queryParams = ref<BookRequest>({    name: "",    pageNum: 1,    pageSize: 2})
// 获取列表数据const totalCount = ref(0)const tableData = ref<Book[]>([])const getBooks = async () => {    await getByRequest(queryParams.value).then(resp => {        tableData.value = resp.data.dataList        totalCount.value = resp.data.totalCount    })}getBooks()

根路径├── .env.development 开发环境配置文件├── .env.production 生产环境配置文件└── package.json

# 开发环境配置  VITE_NAME='开发环境'VITE_DOMAIN_URL_VUE_BOOT=http://localhost:8082

VITE_NAME='生产环境'VITE_DOMAIN_URL_VUE_BOOT=http://localhost:8082

{  ...  "scripts": {    "dev": "vite --mode development", // 开发启动 "npm run dev"    "build": "run-p type-check build-only", // 生产构建静态资源到 /dist 目录 "npm run build"    "preview": "vite preview", // 本地运行 /dist 目录文件，进行提前验证 "npm run preview"    "build-only": "vite build --mode production",    "type-check": "vue-tsc --noEmit"  },  ...}

const axiosService = axios.create({  baseURL: import.meta.env.VITE_DOMAIN_URL_VUE_BOOT,   timeout: 3000})

  build: {    rollupOptions: {      input: "./src/main.ts",      output: {        dir: "dist",        /* 去除hash值 */        entryFileNames: "assets/[name].js",      }    }