前端如何将两个分离项目合并发布到一个端口
我在开发过程中遇到将前台和后台分离的项目部署到一个端口的问题,在网上找了很久都没有答案,最终通过查找webpack文档才得以解决,其实这个问题是比较简单的。
我的项目使用的是Vue3框架:
- 配置Webpack配置文件, Vue里面是vue.config.js
- 后台配置:
module.exports = defineConfig({ publicPath: "/admin/", })
- 前台配置:
module.exports = defineConfig({ publicPath: "/admin/", })
- 后台配置:
- 配置nginx文件:
server { listen 80; server_name localhost; client_max_body_size 100m; client_body_buffer_size 128k; proxy_connect_timeout 5; proxy_send_timeout 1800; proxy_read_timeout 1800; proxy_buffer_size 4k; proxy_buffers 4 32k; proxy_busy_buffers_size 64k; proxy_temp_file_write_size 64k; auth_basic "status"; # 后台路由 location /admin { root /usr/share/nginx/html/release; index index.html index.htm; try_files $uri $uri/ /admin/index.html; } # 配置api代理 location /v1 { rewrite ^/v1/(.*)$ /$1 break; proxy_pass http://admin:8888; } # 静态资源路径 location ~ \/uploads\/.*\.(gif|jpg|png|bmp|pdf)$ { root /data; } # 配置前台路由 location / { root /usr/share/nginx/html/release/portal; index index.html index.htm; try_files $uri $uri/ /portal/index.html; #VUE项目,配置路由(必须) } }
- Vue Router配置:
- 后台配置:
export default createRouter({ history: createWebHistory("/admin"), routes })
- 前台配置:
export default createRouter({ history: createWebHistory("/"), routes })
- 后台配置:
完成! 其实主要还是不太熟悉webpack