前言
项目开发过程中，偶尔会遇到本地开发环境显示正常
但是打包到测试环境，显示异常的情况
遇到这样的问题，你会怎么处理呢？
修改代码，每次都推送到测试环境打包验证吗？
确实是一个办法，不过麻烦且效率低下！
能不能本地打包，本地预览页面效果呢？ 当然！
首先，确认项目使用的打包工具，是vite，还是vue-cli中内嵌的webpack
一、vite项目
在 vite 项目中，如果需要预览打包后的静态文件，可以使用 vite 提供的 vite preview 命令。
这个命令允许你在本地启动一个 HTTP 服务器来预览打包后的项目
（1） 确保项目已经打包
确保你已经运行了打包命令，生成了打包后的静态文件。通常使用以下命令来打包：
```
npm run build
或 vite build
```
（2） 运行 vite preview 命令
打开命令行工具，进入到项目根目录，并运行 vite preview 命令：
```
npm run preview
或 vite preview
```
（3） 预览项目
当命令执行成功后，vite 会在默认端口（localhost:5000）启动一个 HTTP 服务器，并自动打开浏览器显示预览页面。如果浏览器没有自动打开，请手动访问该地址。
二、webpack项目
可以借助第三方工具，例如live-server，辅助预览打包以后的静态文件
（1） 安装live-server插件
在vscode编辑器中，搜索安装live-server插件
（2） 确保项目已经打包
确保你已经运行了打包命令，生成了打包后的静态文件。
```
npm run build
```
（3） 使用live-server预览项目
在打包生成的dist目录下，找到index.html文件，鼠标右击选择 Open with Live Server或点击编辑器右下角的Go Live
live server 会在默认端口（localhost:5500）启动一个 HTTP 服务器，并自动打开浏览器显示预览页面。如果浏览器没有自动打开，请手动访问该地址。
