1Panel部署vue3项目

 一、构建打包

1.确认 vite.config.ts 设置正确

// vite.config.ts
export default defineConfig({
  base: './', // 相对路径，适合部署在子目录
  build: {
    outDir: 'dist', // 打包输出目录
  },
})

2.打包命令

npm run build

默认会在根目录生成 dist 文件夹，里面就是部署产物。 

二、部署步骤

方法 一、用「静态资源站点」功能部署 dist 文件夹（最简单）

location / {
        try_files $uri $uri/ /index.html last; 
        index index.html; 
    }

方法 二、进阶部署方式（容器部署 vue 项目）

把 dist/ 中的内容上传到服务器的 /opt/vue-app/ 文件夹中（你可以在 1Panel 的【文件】中上传，确保上传的是 index.html 开头的那一层内容，不要整个 dist 文件夹）。

创建容器时按如下配置填写： 

1.镜像名

2.端口配置

✅表示外部访问 http://**.**.**.**:8200/ 实际访问的是容器内部 Nginx 的 80 端口。

3.网络选择

 4.挂载路径（最关键的地方）

✅ 前者是将你上传的 Vue3 dist 静态文件挂载到 Nginx 默认静态页面目录。

✅ 后者是（推荐）用自定义配置解决“刷新页面404”的问题（可选）。

5.自定义 nginx.conf（解决刷新404）

📌挂载进容器

宿主 /opt/vue-app/nginx.conf → 容器 /etc/nginx/nginx.conf

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 80;
        server_name localhost;

        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;

            # 跨域配置
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header Access-Control-Expose-Headers 'Content-Length,Content-Range';
        }
    }
}

 6.启动容器并访问

 点击【确定】创建容器，然后进入容器列表，确保它运行成功。

🧠 排错建议 

 📌 确保该端口没有被占用、系统防火墙和云安全组已开放该端口

【云安全组】

【防火墙】