Vue.js 3 + Vite项目生产构建后部署运行命令相关问题咨询

安全阿岳

2026-10-3

Vite Vue3 项目部署启动配置解决方案

首先明确Vite的核心运行逻辑：
- dev命令仅用于本地开发环境，自带热更新等调试能力，性能低且不安全，不可用于生产环境部署
- Vite本身不内置生产环境Web服务能力，执行build命令后只会在项目根目录生成dist文件夹，里面是所有编译后的可直接部署的静态资源文件
分场景配置部署方案：
1. 静态站点托管平台部署
  不需要额外配置启动命令，直接在平台的部署配置页填写以下参数即可：
构建命令：npm run build
发布目录：dist
平台会自动托管dist目录下的静态资源，无需额外启动服务。
1. 云服务器/容器类服务部署
  需要自行添加静态文件服务依赖和启动脚本，操作步骤如下：
  第一步：安装轻量静态服务工具serve作为生产依赖
```
npm install serve --save
```
第二步：修改package.json的scripts字段，新增start脚本：
```
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "start": "serve dist -p 3000"
  }
}
```
其中-p 3000为指定服务启动端口，可根据自身需求修改。
第三步：部署执行流程
先执行npm run build完成静态资源编译，再执行npm run start即可启动生产环境服务。
额外提示：你当前使用的Vite版本为1.0.0的内测版本，版本较老，后续如果出现编译兼容问题可以考虑升级到稳定版本。