方案1：重定向

server {listen 80;server_name localhost;location / {root /usr/share/nginx/html;index index.html;}location /music/ {proxy_pass   http://127.0.0.1:80/;}
}

方案2：vite+nginx双重配置

在方案1中，我们虽然能够实现 通过 /music/ 访问到根路由对应的网页，但是在vue的内部访问机制中，静态资源，访问的十不通过 /music/ 前缀的。

我们通过在 vite.config.js 中添加base前缀，能够控制vue3静态资源访问进制走的是base配置的公共路径。同时，我们又在nginx的配置中，配置了这个路径的重定向，所以最终，我们实现了通过同一个 /music 前缀，既能够访问到前端页面，也能够访问到前端的静态资源。

vite.config.js

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import {AntDesignVueResolver} from 'unplugin-vue-components/resolvers';export default defineConfig({base: "/music",plugins: [vue(),Components({resolvers: [AntDesignVueResolver({importStyle: false, // css in js}),],}),],
});

nginx.conf

server {listen 80;server_name localhost;location / {root /usr/share/nginx/html;index index.html;}location /music/ {proxy_pass   http://127.0.0.1:80/;}
}