node vue项目布署到服务器上的方法,解决刷新页面显示404问题,简要说明

前端项目打包

npm run build

然后会生成 dist 文件夹,把这个放到nginx上就行了,静态页面

后端

把deploy.sh 和 server这个文件夹复制到服务器上,server里面的 node_modules可以不复制,布署时会自动生成

到服务器上执行 ./deploy.sh

nginx配置文件,这是1panel里生成的配置文件,不是反向代理,如果你的网站是在内网通过frp穿透到公网,那么 你在公网上还需要再配置一次反向代理,就用1panel默认操作就行

这一个 配置文件里最关键的一行 try_files $uri $uri/ /index.html; 一定要有,要不然刷新页面会404

server {
    listen 6081;  # 仅监听指定端口
    index index.php index.html index.htm default.php default.htm default.html; 
    proxy_set_header Host $host; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header X-Forwarded-Host $server_name; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_http_version 1.1; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection $http_connection; 
    access_log /www/sites/www.test2.com/log/access.log main; 
    error_log /www/sites/www.test2.com/log/error.log; 

    # 添加 try_files 指令
    root /www/sites/www.test2.com/index;
    try_files $uri $uri/ /index.html;

    location ^~ /.well-known/acme-challenge {
        allow all; 
        root /usr/share/nginx/html; 
    }

    # API 反向代理
    location /api {
        proxy_pass http://localhost:3010;  # 后端服务地址
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    error_page 404 /404.html; 
}