npm run dev 是在开发模式运行，怎么在生产环境运行

完整分两步：打包生产资源 + 启动生产环境预览/部署

一、第一步：执行打包，生成线上真实资源

npm run build

对应你package.json脚本：

"build": "vue-tsc -b && vite build"

执行逻辑：

1. vue-tsc -b：全局TS类型校验，类型报错直接终止打包；
2. vite build：
   • 移除所有TS类型语法、注释；
   • 压缩JS、CSS、图片，混淆变量名，删除调试代码；
   • 输出纯静态文件到项目 dist 文件夹，这就是线上实际运行的代码。

二、第二步：两种方式运行生产模式

方式1：本地预览dist（本地模拟真实线上环境）

dist 只是静态文件夹，不能直接双击打开（会出现资源路径404），需要静态服务器承载：

1. 安装静态服务工具 serve

npm install -D serve

2. 直接启动dist

serve dist

或者

npx serve -s dist

打开控制台给的地址，此时页面运行的就是压缩后的生产代码，和服务器线上效果完全一致。

方式2：部署到服务器（真实线上环境）

前端dist是纯静态资源，必须搭配Web服务器（Nginx最常用）：

1. 把本地整个 dist 文件夹上传到服务器；
2. 配置Nginx，指定根目录为dist；
3. 启动Nginx，外网访问域名/IP，就是正式生产环境。

三、dev模式 vs build生产模式核心区别

维度	npm run dev（开发）	npm run build 产物dist（生产）
代码	TS不转干净、代码不压缩、保留注释、调试代码	全部转为精简压缩JS，无多余代码
服务器	Vite内置开发服务器，内存编译，热更新	无内置服务，需要Nginx/serve承载
打印日志	完整打印console日志、报错详情	部分日志会被移除，报错无源码映射
访问速度	源码未压缩，加载慢	代码体积极小，加载更快
用途	本地写代码、调试	交付客户、外网正式使用

补充关键点

1. 没有 npm run prod 这类命令 ，Vite体系标准流程就是 build 打包dist；
2. 绝对不能用 npm run dev 部署上线：dev服务性能差、代码未压缩、存在热更新开销，并发高极易崩溃；
3. Nuxt3/Next.js这类全栈框架例外：它们有专属生产启动命令，因为自带Node后端服务；你当前纯Vite Vue项目只有静态dist。