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

一、初始化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;

}

 

重启 Nginx 后即可访问。