react+vite打包BrowserRouter路由程序发布到服务器访问资源404

Question

问题：react+vite打包BrowserRouter路由程序发布到服务器访问资源404

操作环境：
1.服务器阿里云
系统：Alibaba Cloud Linux 3.2104 LTS 64位
安装的宝塔

程序代码：

VITE_APP_BASE_PATH = /taste-boss/

<BrowserRouter basename={VITE_APP_BASE_PATH}>
    <SetUpRoutes />
</BrowserRouter>

vite部分代码
base: viteEnv.VITE_APP_BASE_PATH,
build: {
outDir: ["production", "staging"].includes(mode) ? "taste-boss" : "taste-boss-test",
assetsDir: "static",
manifest: true,
            
rollupOptions: {
    output: {
    chunkFileNames: "assets/chunks/[name].[hash].js",
    entryFileNames: "assets/js/[name].[hash].js",
    assetFileNames: "assets/[ext]/[name].[hash].[ext]",
                },
            },
        },

服务器站点根目录：/www/wwwroot/tp/public
单独设置了web文件放置前端代码
nginx配置代码

 location /taste-boss/ {
    root /www/wwwroot/php/tp/public/web; # 替换为你的前端应用路径
    try_files $uri $uri/ /taste-boss/index.html;
}

结果就是：http://域名/tast-boss/ 访问以后

http://域名/taste-boss/assets/chunks/vendor.c1af9757.js
Request Method:
GET
Status Code:
404 Not Found

请问到底如何进行配置或者如何操作可以解决当前这个问题（使用hash模式完全没有问题不过带有#号所以要使用BrowserRouter路由模式）

Answer 1

首先404是路径没有找到
目前看你的问题出在nginx， 如有帮助，请点几个采纳！

将 root /www/wwwroot/php/tp/public/web; # 替换为你的前端应用路径
替换成如下：
alias /www/wwwroot/php/tp/public/web;

修改后，出现403问题，是被拦截访问了，看看你的文件夹有没有访问权限，设置权限命令：chmod 777 文件夹路径

上面要是不行，换下面的试试在，将你的前端文件放入到nginx下的html文件夹里，然后用如下配置。
默认nginx 在liunx服务器路径是：/www/server/nginx

server {
        listen       80 ;
        server_name  xxxxx;
        
        #ssl_certificate      C:\hvit\service\ssl_nginx\xxxxxx.pem;
        #ssl_certificate_key  C:\hvit\service\ssl_nginx\xxxxxxxxxxx.key;
        ssl_ciphers HIGH:!aNULL:!MD5:!3DES;
           ssl_protocols TLSv1.2;
        ssl_prefer_server_ciphers  on;

        charset utf-8;
        underscores_in_headers on;

        location /taste-boss/{
          alias /www/server/nginx/html;
          index index.html;
        }
      
}