使用 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：

卸载已安装的 Node.js（如有）
下载安装包：github.com/coreybutler...
安装时注意：
- 安装路径不要包含空格（如 C:\nvm）
- 自动配置环境变量（勾选相关选项）

macOS / Linux 用户

使用 curl 安装：

bash 复制代码

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

然后重启终端或执行：

bash 复制代码

source ~/.bashrc  # 或 ~/.zshrc

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

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

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

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

ruby 复制代码

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

这两行命令会修改 NVM 的默认下载源为 淘宝 NPM 镜像（npmmirror.com） ，大幅提升下载速度。
注意：npmmirror.com 是原 npm.taobao.org 的新域名，由阿里云维护。

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

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

bash 复制代码

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

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

复制代码

nvm install 18.18.2

推荐使用 LTS（长期支持）版本，稳定且兼容性好。

3. 切换并使用该版本

perl 复制代码

nvm use 18.18.2

验证是否生效：

bash 复制代码

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

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

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

Windows 示例（以 C 盘为例）

arduino 复制代码

mkdir C:\nodejs\node_global
mkdir C:\nodejs\node_cache

然后配置 npm：

swift 复制代码

npm config set prefix "C:\nodejs\node_global"
npm config set cache "C:\nodejs\node_cache"

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

打开"系统属性" → "环境变量"
在 用户变量 的 Path 中添加：C:\nodejs\node_global

这样你就可以全局使用 vue、vite 等命令了。

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

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

.npmrc 文件在文章顶部下载

✅ 此配置确保所有依赖（包括 sass、puppeteer 等）都从国内镜像下载。
💡 将此文件复制到 C:\Users<你的用户名>.npmrc（Windows）或 ~/.npmrc（macOS/Linux）。

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

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

执行创建命令

sql 复制代码

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

参数说明：

my-app：项目文件夹名称

--template vue：指定使用 Vue 模板（纯 Vue 3，无 TypeScript、Router 等）

进入项目并安装依赖

bash 复制代码

cd my-app
npm install

此时会从 registry.npmmirror.com 安装依赖，速度飞快！

第七步：启动开发服务器

arduino 复制代码

npm run dev

你会看到类似输出：

arduino 复制代码

  VITE v5.0.0  ready in 400 ms

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

打开浏览器访问 http://localhost:5173，即可看到 Vue 的欢迎页面。

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

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

1. 安装 Vue Router

css 复制代码

npm install vue-router@4

Vue 3 必须使用 vue-router 4.x

2. 创建路由配置文件

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

javascript 复制代码

// 管理路由的文件 
// 导入组件
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

为什么用 createWebHashHistory()？

它使用 URL 的 # 部分（如 http://localhost:5173/#/about）

不需要服务器配置，适合静态部署（如 GitHub Pages、Vercel、Netlify）

3. 在 main.js 中挂载路由

修改 src/main.js：

javascript 复制代码

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：

xml 复制代码

<script setup>

</script>

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

<style scoped>

</style>

5. 重新运行项目

arduino 复制代码

npm run dev

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

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

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

arduino 复制代码

npm run build

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

预览构建结果：

arduino 复制代码

npm run preview

总结：完整流程回顾

步骤	操作
1	安装 NVM（多版本 Node 管理）
2	配置国内镜像：`nvm node_mirror` 和 `nvm npm_mirror`
3	`nvm install 18.18.2` + `nvm use 18.18.2`
4	创建全局目录并配置 PATH
5	复制 `.npmrc` 到用户目录，启用全量镜像
6	`npm create vite@latest my-app -- --template vue`
7	`npm install` + `npm run dev`
8	安装 `vue-router@4`，配置 `createWebHashHistory()`
9	修改 `main.js` 和 `App.vue`，启用路由

小贴士

如果你希望使用 Vue 官方脚手架（带 Router/Pinia） ，也可以运行：
sql 复制代码
```
npm create vue@latest
```
它会交互式让你选择是否集成 Router、Pinia、ESLint 等。
开发中遇到依赖安装慢？始终检查 .npmrc 是否生效：npm config get registry
Vite 支持 TypeScript、JSX、CSS 预处理器等，按需扩展即可。

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