使用 Vite + Vue 3 搭建项目并配置路由的全流程（含国内镜像加速）

适用于 Windows / macOS / Linux 用户 | 包含 NVM 安装、Node 环境配置、Vite 项目创建、Vue Router 集成

在现代前端开发中，Vite 凭借其极速的冷启动和热更新能力，已成为构建 Vue、React 等应用的首选工具。本文将手把手带你从零开始，使用国内镜像加速，通过 NVM 管理 Node.js 版本，创建一个基于 Vite + Vue 3 的项目，并集成 Vue Router 实现前端路由功能。

第一步：安装 NVM（Node Version Manager）

NVM 是一个用于管理多个 Node.js 版本的工具，特别适合需要在不同项目中切换 Node 版本的开发者。

Windows 用户

推荐使用 nvm-windows：

1. 卸载已安装的 Node.js（如有）

2. 下载安装包：github.com/coreybutler…

3. 安装时注意：

   • 安装路径不要包含空格（如 C:nvm）
   • 自动配置环境变量（勾选相关选项）

macOS / Linux 用户

使用 curl 安装：

curl -o-  | bash

然后重启终端或执行：

source ~/.bashrc  # 或 ~/.zshrc

第二步：配置国内镜像源（加速下载）

由于网络原因，从官方源下载 Node.js 和 npm 包可能非常慢。我们可以通过设置镜像地址解决。

设置 NVM 的 Node 和 npm 镜像（Windows）

在命令行中执行以下命令（需以管理员身份运行 PowerShell 或 CMD）：

nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm node_mirror https://npmmirror.com/mirrors/node/

第三步：安装并使用指定版本的 Node.js

1. 查看可用的 Node.js 版本

nvm list available  # Windows
nvm ls-remote       # macOS / Linux

2. 安装推荐版本（如 LTS 版本 v18.18.2）

nvm install 18.18.2

3. 切换并使用该版本

nvm use 18.18.2

验证是否生效：

node -v  # 应输出 v18.18.2
npm -v   # 显示对应 npm 版本

第四步：创建 Node.js 全局目录（可选但推荐）

为避免权限问题和路径混乱，建议手动创建全局模块和缓存目录。

Windows 示例（以 C 盘为例）

mkdir C:nodejsnode_global
mkdir C:nodejsnode_cache

然后配置 npm：

npm config set prefix "C:nodejsnode_global"
npm config set cache "C:nodejsnode_cache"

将全局目录加入系统 PATH（Windows）

• 打开“系统属性” → “环境变量”
• 在 用户变量 的 Path 中添加：C:nodejsnode_global

第五步：配置 .npmrc 文件（提升后续安装速度）

在用户主目录下（Windows 通常是 C:Users<你的用户名>）创建或编辑 .npmrc 文件

.npmrc 文件在文章顶部下载

第六步：使用 Vite 创建 Vue 3 项目

现在一切准备就绪，开始创建项目！

执行创建命令

npm create vite@latest my-app -- --template vue

进入项目并安装依赖

cd my-app
npm install

第七步：启动开发服务器

npm run dev

你会看到类似输出：

  VITE v5.0.0  ready in 400 ms

    Local:   http://localhost:5173/
    Network: http://192.168.x.x:5173/

打开浏览器访问 ，即可看到 Vue 的欢迎页面。

第八步：集成 Vue Router（实现页面路由）

Vite 默认模板不包含路由，我们需要手动安装并配置。

1. 安装 Vue Router

npm install vue-router@4

2. 创建路由配置文件

在 src 目录下新建 router/index.js：

// 管理路由的文件 
// 导入组件
import Login from '../views/user/login.vue'  // 登录组件


// 导入路由中的方法
import { createRouter, createWebHashHistory } from 'vue-router'
// 配置组件和访问路径
const routes = [
    { path: '/login', component: Login }, // /login是登录组件的访问路径，component表示组件的名称

]
// 创建路由对象
const router = createRouter({
    // 路由的数据
    routes,
    history: createWebHashHistory(), // 路由模式，createWebHashHistory表示使用哈希模式
})
// 导出路由实例
export default router

3. 在 main.js 中挂载路由

修改 src/main.js：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 导入路由对象
import router from './router'
// 创建项目对象
const app = createApp(App)
// 挂载路由对象
app.use(router)
// 挂载组件
app.mount('#app')

4. 在 App.vue 中添加导航和路由出口

修改 src/App.vue：

<script setup>

</script>

<template>
  <RouterView></RouterView>
</template>

<style scoped>

</style>

5. 重新运行项目

npm run dev

现在点击“首页”和“关于”，页面内容会动态切换，说明路由已生效！

第九步：构建与部署（可选）

开发完成后，构建生产版本：

npm run build

生成的 dist/ 文件夹可直接部署到任何静态服务器（如 Nginx、GitHub Pages、Vercel 等）。

预览构建结果：

npm run preview

总结：完整流程回顾

小贴士

• 如果你希望使用 Vue 官方脚手架（带 Router/Pinia） ，也可以运行：

  npm create vue@latest
  

  它会交互式让你选择是否集成 Router、Pinia、ESLint 等。

• 开发中遇到依赖安装慢？始终检查 .npmrc 是否生效：npm config get registry

• Vite 支持 TypeScript、JSX、CSS 预处理器等，按需扩展即可。

至此，你已经成功搭建了一个高性能、可路由、国内加速优化的 Vue 3 项目！接下来就可以自由开发你的应用了。