vue3项目打包上传到nginx服务器开启伪静态和反向代理

1.vue3文件打包

npm run build

2.上传服务器

新建80端口网站，上传到宝塔文件目录中。

注意访问404的情况，如果之前更改过nginx设置或者宝塔bug原因，需要手动修改nginx配置文件中的网站地址名称，如10.10.10.10_80，修改为10.10.10.10

3.配置网站伪静态（反向代理）：

• 适用前端请求url带api，后端无api，后端服务端口为81。
• 在网站菜单中点击右侧设置，弹出列表选择伪静态，添加以下代码

location ^~ /api/ {
    # 去掉/api前缀，把后面路径转发给后端
    rewrite ^/api/(.*)$ /$1 break;
    proxy_pass http://127.0.0.1:81;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

# Vue History路由
location / {
    try_files $uri $uri/ /index.html;
}