Vite、Pinia 与 Vue Router

作者: luote (luote) · 个人主页 luote996.cn

Vite 是什么

Vite 是前端 构建工具 与 开发服务器。开发时利用浏览器原生 ES Module，启动快、热更新快；生产构建使用 Rollup 打包优化。脚手架通过 npm run dev 启动 Vite，npm run build 输出静态文件到 dist/。

项目脚本

命令	作用
npm run dev	开发服务器，默认端口 5173
npm run build	vue-tsc 类型检查 + vite build
npm run preview	本地预览生产构建结果

vite.config.ts 要点

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 5173,
    proxy: {
      // 可选：把 /api 代理到后端，避免跨域
    }
  }
})

路径别名 @ 指向 src/，import 时可写 @/api/user。

环境变量

以 VITE_ 开头的变量可在客户端访问：

const baseURL = import.meta.env.VITE_API_BASE_URL

见 .env.development、.env.production 与 环境变量 文档。

Pinia 状态管理

多个页面需要共享 登录用户、Token 时，不宜层层 props 传递。Pinia 是 Vue 官方推荐的状态库。

定义 store

store/user.ts 示例结构：

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore('user', () => {
  const token = ref<string | null>(localStorage.getItem('token'))
  const userInfo = ref<UserVO | null>(null)

  function setToken(t: string) {
    token.value = t
    localStorage.setItem('token', t)
  }

  function logout() {
    token.value = null
    userInfo.value = null
    localStorage.removeItem('token')
  }

  return { token, userInfo, setToken, logout }
})

在组件中使用

import { useUserStore } from '@/store/user'

const userStore = useUserStore()
userStore.setToken(res.token)

Vue Router 路由

路由表

router/index.ts 定义 path 与组件映射：

path	组件	说明
/login	Login	登录
/register	Register	注册
/	Home	首页，需登录

路由守卫

router.beforeEach((to, from, next) => {
  const userStore = useUserStore()
  if (to.meta.requiresAuth && !userStore.token) {
    next('/login')
  } else {
    next()
  }
})

未登录访问需认证页面时重定向到登录页；已登录访问 /login 可重定向到首页（按项目实际逻辑）。

编程式导航

import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/')

三者协作关系

登录流程：Login 组件调用 API → 成功写入 Pinia token → router.push('/') → 后续页面从 store 读用户信息。

与 luote 脚手架的关系

文件	说明
vite.config.ts	构建与别名
src/main.ts	createApp、use(pinia)、use(router)
src/router/index.ts	路由与守卫
src/store/user.ts	用户与 token

下一章：Element Plus Axios ECharts