Vite 是一个基于浏览器原生 ESM 的前端构建工具，且拥有速度快到惊人的模块热更新，且热更新的速度不会随着模块增多而变慢。他的主要特性有即时启动、快速热更新等。本文将详细介绍如何在本地安装 Vite 以及结合路由侠内网穿透实现外网访问 Vite 。
第一步，本地部署 Vite 项目
1，创建一个基于 Vite 的项目并选择 Vue 和 Typescript。
npm create vite@latest my-vite-app --template vue
2，进入项目目录。
cd my-vite-app
安装依赖。
npm install
安装 vue 插件。
npm install vue @vitejs/plugin-vue -D
在项目目录下创建 vite.config.js 文件并编辑如下内容。
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
server: {
host: '0.0.0.0', // 允许局域网访问
port: 3000
}
});
项目目录下找到 package.json 并添加一句命令允许所有域名访问。
"scripts": {
"dev": "vite --host 0.0.0.0 --port 3000 --open"
}
3，启动开发服务器。
npm run dev
4，浏览器输入 http:localhost:3000 即可访问 Vite 界面。
第二步，外网访问 Vite
本机安装路由侠。点此下载
1，下载安装完成后，打开路由侠界面，点击【内网映射】。
;
2，点击【添加映射】。
3，选择【原生端口】。
4，在内网端口里填写端口 3000 后点击【创建】按钮，如下图。
5，创建好后，就可以看到一条映射的公网地址，鼠标右键点击【复制地址】。
在 vite.config.js 文件中添加下列语句，保存后重新启动服务器。
allowedHosts: [
'lyxlike.f1.luyouxia.net' // 明确允许这个域名
]
6，在外网的浏览器的地址栏输入复制的外网地址就可以访问本地部署的 Vite 界面了。
以上就是在本地局域网内部署 Vite 以及利用路由侠内网穿透实现外网访问全部教程了，如果想要对路由侠有更多的了解，可以进官网详细了解，路由侠官网地址：www.luyouxia.com