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