当前位置：首页 > news >正文

初始化vue3项目和打包vue3项目

news 2026/5/12 9:54:48

一、初始化vue3项目

执行命令：

npm init vite@latest

二、打包vue3项目

生成打包产物在项目根目录运行打包命令，Vite 会将项目编译为静态文件（默认输出到 dist 目录）：

npm run build   # 或 yarn build / pnpm build

打包成功后，会显示构建信息（如文件大小、构建时间），dist 目录即为可部署的静态资源。

预览打包结果（可选）打包后可通过 vite preview 命令在本地预览部署效果，验证是否有路径错误：

npm run preview  # 启动本地服务器，默认地址 http://localhost:4173

三、部署vue3项目

部署到传统服务器（如 Nginx、Apache）

Nginx 配置示例：

将 dist 目录的所有文件上传到服务器的 /usr/share/nginx/html（或自定义目录），修改 Nginx 配置（/etc/nginx/nginx.conf）：
重点是http里的server字段块，一定要放在include /etc/nginx/conf.d/*.conf之前。遵循自上而下的原则，放在前面的会生效。
其中root指向index.html文件所在目录，dist这个目录名称是可变的。

user  nginx;
worker_processes  auto;error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;events {worker_connections  1024;
}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile        on;#tcp_nopush     on;
keepalive_timeout  65;#gzip  on;
server {listen 80;server_name _;root /usr/share/nginx/html/dist;index index.html;location / {try_files $uri $uri/ /index.html;}}include /etc/nginx/conf.d/*.conf;}