vite+vue3+nginx配置统一公共前缀

方案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/;
    }
}