首页 > 其他分享 >vue前端项目部署的一点小tip

vue前端项目部署的一点小tip

时间:2024-11-05 14:01:46浏览次数:1  
标签:index mydomain vue 前端 tip header set proxy location

一个典型的前后端分离项目,前端分用户入口和管理员入口,一般希望这样部署:

https://mydomain.com/    普通用户入口

https://mydomain.com/admin/  管理员入口

关键就是在vite.config.ts里要这么指定base:

base: './'

这样build出来的文件,不管放在哪个项目下面都可以正常运行,因为它使用的是相对路径。

相应的,在nginx里面需要这样配置:

server {
        listen       8888;
        server_name  mydomain.com;

        location / {
            root   F:/Projects/front-user/dist;
            index  index.html index.htm;
        }
		
		location /admin/ {
            alias   F:/Projects/front-admin/dist/;
            index  index.html index.htm;
        }
        
        location /proapi {
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;	 
            proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header User-Agent $http_user_agent;
            proxy_redirect off;
            proxy_pass http://127.0.0.1:8100;
        }
    }

 后端程序取客户端IP地址的时候,首先从Header里面取X-Real-IP,取不到再考虑request.remode_addr之类的直接取法。
这样部署基本就可以了。

标签:index,mydomain,vue,前端,tip,header,set,proxy,location
From: https://www.cnblogs.com/achillis/p/18527713

相关文章

  • 八字排盘PHP算法实现源码_网页前端设计(包含十神、藏干、大运流年)
    一、算法概述八字排盘是根据个人的出生年、月、日、时(四个时间点)计算出天干地支,并形成八字(年柱、月柱、日柱、时柱)。此外,排盘还涉及十神(如正财、偏财等)、藏干(每个地支内藏的天干)、大运和流年等内容。这些元素共同构成了一个人的命理信息。二、输入信息用户需要提供以下信息:......
  • 【前端】六款高颜值登录页面
    原创吴旭东无限大infinity第一款–简约风格HTML:<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • 【前端】六款高颜值注册界面
    原创吴旭东无限大infinity和昨天的一样,带来了六款注册界面,可复制源码(需要定制请加微信)第一款–简约风格HTML:<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-wi......
  • pyspark建模(类似于dwd层),flask直接对接前端请求进行召回(类似于ads层,但是不保存)
    2.SparkMLib2.1SparkMLib开发环境准备2.1.1配置python和spark环境安装Python环境安装Anaconda3-5.2.0-Windows-x86_64.exe配置环境变量Anaconda_HOMEE:\20241014_Soft\Anaconda3PATH%Anaconda_HOME%Scripts;%Anaconda_HOME%Library\mingw-w64\bin;%Anaconda_H......
  • Vue3 iOS微信JSSDK授权签名错误及图片选择兼容
    iOS微信JSSDK授权签名错误及图片选择兼容一、项目概述二、iOS签名错误invalidsignature三、iOS选择图片转载请注明出处:https://blog.csdn.net/hx7013/article/details/143502680一、项目概述Vue3+Vite+Vue-Router4+JS-SDK1.6由于之前开发调试都是在......
  • 你肯定不知道:Vue多文件上传时拖放操作的优雅处理
            多文件上传是Vue应用的常见操作。操作要求:(1)允许反复拖放多个文件到待上传区域(2)自动过滤掉重复拖放的文件(3)拖放后,形成待上传文件列表的简易缩略图(4)双击文件名,可移去某个文件。具体效果,如下图所示。        我们可将拖放操作设计为一个插件指令dragDro......
  • vue项目接入CDN域名:你可能会碰到的问题
    背景项目需要接入cdn加速域名,但只能在生产环境验证。所以发版之前本地先准备好cdn的包,然后发版的时候部署到生产环境,结果发现,点击菜单后页面的URL不对了,静态资源加载是可以的。本来页面URL是这样的:test.com/app/xpg/ind…但点击菜单后,把cdn的域名加上去了:test.com/https://c......
  • 基于SpringBoot + Vue的在线学习平台(角色:学生、教师、管理员)
    文章目录前言一、详细操作演示视频二、具体实现截图三、技术栈1.前端-Vue.js2.后端-SpringBoot3.数据库-MySQL4.系统架构-B/S四、系统测试1.系统测试概述2.系统功能测试3.系统测试结论五、项目代码参考六、数据库代码参考七、项目论文示例结语前言......
  • 基于SpringBoot + Vue的社区智慧医疗养老系统(角色:老人、老人家属、管理员)
    文章目录前言一、详细操作演示视频二、具体实现截图三、技术栈1.前端-Vue.js2.后端-SpringBoot3.数据库-MySQL4.系统架构-B/S四、系统测试1.系统测试概述2.系统功能测试3.系统测试结论五、项目代码参考六、数据库代码参考七、项目论文示例结语前言......
  • 【热门主题】000027 React:前端框架的强大力量
    前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......