惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

J
Java Code Geeks
腾讯CDC
Jina AI
Jina AI
博客园 - 司徒正美
博客园 - 三生石上(FineUI控件)
Apple Machine Learning Research
Apple Machine Learning Research
GbyAI
GbyAI
WordPress大学
WordPress大学
Hugging Face - Blog
Hugging Face - Blog
T
The Blog of Author Tim Ferriss
小众软件
小众软件
M
MIT News - Artificial intelligence
MyScale Blog
MyScale Blog
D
Docker
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Google DeepMind News
Google DeepMind News
月光博客
月光博客
L
LangChain Blog
F
Fortinet All Blogs
Microsoft Azure Blog
Microsoft Azure Blog
博客园 - Franky
C
Check Point Blog
U
Unit 42
人人都是产品经理
人人都是产品经理

博客园 - 星河赵

Vue 打包区分线上测试 Ubuntu + Nginx 使用 Let's Encrypt 生成 HTTPS 证书 微信支付申请相关资料 mysql 常用命令 熟练使用 mysql flask fastapi mysql 常用命令 LangChain AI 客服 Agent 项目学习笔记 海外stripe 聚合支付 ffmpeg 介绍 AE中制作带可替换屏幕的视频模版 记录|AI超写实短视频制作流程+提示词 在Pycharm 中使用 Python Module 方式启动 uvicorn Conda 虚拟环境完整指南 CentOS / OpenCloudOS 服务器如何安装远程桌面 Python 项目模块导入问题解决方案 2026 谷歌 Antigravity 最新安装教程! Vscode 常用配置 如何修改 Redis 数据存放路径 Vue 后台项目 Nginx 部署笔记(SPA / Vite 构建) Python -m 用法(极简版) Ubuntu 上安装 MongoDB 并启用事务的完整流程 mac 微信双开新方法 nginx 对静态资源进行压缩 HMAC-SHA256 请求签名与验签实践(Python 可直接复用) python fast api websocket 连接事例 在 Flask 中并发执行任务 Vscode 配置快捷键和JetBrains(pycharm)一样 Linux 服务器的 SSH 登录端口号 从默认的 22 改掉 配置 Docker 镜像加速器 python fast api 部署
服务端部署Vue
星河赵 · 2026-04-03 · via 博客园 - 星河赵

服务端如何快速部署Vue项目

一、最简单:直接用静态服务(适合测试 ✅)

1️⃣ 前端打包

生成:

2️⃣ 服务器运行

npm install -g serve
serve -s dist

访问:

👉 适合:测试 / 临时预览
👉 缺点:不能和后端融合

image

二、通过nginx部署服务

upstream pickwant {
     server 127.0.0.1:23488;
}

upstream pickwant_ws {
     server 127.0.0.1:23489;
}

upstream pickwant_admin {
     server 127.0.0.1:23490;
}

server {
    listen       80;
    listen       443  ssl;
    server_name  api-test.test.com;
    #ssl  on;
    client_max_body_size 512m;
    ssl_certificate      /app/certs/test.com/current/test_com.crt;
    ssl_certificate_key  /app/certs/test.com/current/test_com.key;
    access_log  /app/pickwant/logs/nginx/api-test.test_access.log main_with_rt;
    error_log  /app/pickwant/logs/nginx/api-test.test_error.log;

    location /static/photo/p1 {
        alias /app/pickwant/pickwant/generated/photo/p1;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    }

    location / {
        include uwsgi_params;
        uwsgi_pass pickwant;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /v4/socket.io {
        include uwsgi_params;
        uwsgi_pass pickwant_ws;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 300s;

        add_header Access-Control-Allow-Headers "X-Requested-With,Authorization";
        add_header Access-Control-Allow-Methods "GET,POST,OPTIONS";
        # add_header Access-Control-Allow-Origin "*";
    }

    location ~ /admin {
        # include uwsgi_params;
        proxy_pass http://pickwant_admin;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location ~ MP_verify.*\.txt { # 腾讯公众号域名验证用
        root /app/pickwant/pickwant/static;
    }
}

# server {
#     listen 80;

#    server_name www.test.com test.com;

    #(第一种)把http的域名请求转成https
#    return 301 https://$host$request_uri;
#  }

server {
    listen       80;
    listen       443  ssl;
    server_name  www.test.com test.com;
    #ssl on;
    client_max_body_size 512m;
    ssl_certificate      /app/certs/www.test.com/current/www.test.com.crt;
    ssl_certificate_key  /app/certs/www.test.com/current/www.test.com.key;

    access_log  /app/pickwant/logs/nginx/www.test.com_access.log;
    error_log  /app/pickwant/logs/nginx/www.test.com_error.log;

    location /mb_home {
        return 301 https://$host/mb/home;
    }

    location / {
        try_files $uri $uri/index.html $uri/ /index.html;
        expires 600;
        add_header Access-Control-Allow-Methods *;
        add_header Access-Control-Max-Age 3600;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Origin *;
        root /app/pickwant/web/pages;
        index index.html;
    }

    location /.git {
        root html;
        deny all;
        return 403;
    }

}