本地部署前端构建工具 Vite 并实现外部访问

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 界面了。