前端打包配置+nginx配置实现部署及部署地址带特定前缀的几种方式

前端打包后要部署到服务器,在浏览器中可以通过url访问到我们开发的系统,通过nginx代理在工作中是一种很常用的方式。

这里以本地为例,把本地电脑当作一个服务器,实现普通部署、带特定前缀等
前端使用vue-cli+vue作为例子
以下内容都只解决在不同情况下请求前端打包文件404问题,如果在index.html中有引入public下的静态资源,可以使用**<%= BASE_URL %>**来代替相对路径或绝对路径,<%= BASE_URL %>对应的就是vue.config.js中publicPath
在这里插入图片描述

1.hash路由+不带前缀的普通部署

效果如下:地址为ip:port/#/hashPath形式(因为用的是默认的端口80所以可以不写端口号)
在这里插入图片描述
这种是最简单的部署方式。部署时不使用任何前缀,且前端使用的hash路由模式,不用担心后面访问资源404问题。
配置:

  1. 前端vue.config.js配置中不配置publicPath或者设置publicPath:'/'。对应的如果使用webpack.config.js,不设置output.publicPath或者设置为’/'。
  2. 打包生成dist文件,放到任意自己期望的目录下面
  3. 配置nginx
    示例:
    在这里插入图片描述
    其中:
    location:nginx的块级指令,用来匹配url请求。这里我们打算把前端部署在不带前缀的地址上,故直接使用 / 。关于location更多的配置可以参考https://zhuanlan.zhihu.com/p/137042956?utm_id=0
    root:用于指定文件系统中某个目录作为请求的根目录(还有一个alias与其类似,后面解释)
    index: 用于指定网站初始页 默认值为index index.html后面可以跟多个值用 空格 隔开,更多配置和解释可以参考官网/其他

2. hash路由+特定前缀

效果如下:地址为ip:port/prefixPath/#/hashPath形式
在这里插入图片描述

配置方式1:

  1. 前端打包配置publicPath设置为 ./
    ./代表当前目录下,这样设置可以适配在不同环境下想要为系统设置不同前缀的问题,不论设置什么前缀都能正确匹配
    在这里插入图片描述

  2. 打包生成dist文件,放到任意自己期望的目录下面

  3. 配置nginx:示例:
    在这里插入图片描述
    alias:用于将请求映射到另一个目录或文件上(用于将请求的URL路径与文件系统路径进行映射)

alias和root的区别:

如果上面仍然使用root访问url时得到的结果将是404 Not Found
在这里插入图片描述
root: 指定文件系统中某个目录作为请求的根目录,Nginx会在该目录下寻找请求的文件,最后请求的路径为root指定的URL + location上的URL
alias:将请求映射到另一个目录或文件上,最后请求的路径为alias指定的URL,即loaction后面的路径将被忽略。

配置方式2:

如果部署的前缀固定,可以设置publicPath为固定路径

  1. 配置publicPath为固定地址(这个地址必须和nginx配置的location 后面的url路径保持一致
    在这里插入图片描述

  2. 同配置方式1

  3. 同配置方式1

3.history模式

history模式相对hash模式配置要更加复杂,稍微不注意可能就会出现404
publicPath的几种配置

1. ‘./’ 表示 与当前路径处于同一级

1.1 浏览器地址为localhost/tenant-mgt/ (注意是以/结尾的) 则跟tenant-mgt/同级,相当于是tenant-mat的下一级,因为tenant-mgt后面有一个/
在这里插入图片描述
这情况下请求的地址为:
在这里插入图片描述

1.1 那如果此时tenant-mgt/ 中/后面还有一个路径呢 如loacalhost/tenant-mgt/index 那么上面vue.min.js的请求地址是什么?
答案是和上面一样,即还是loacalhost/tenant-mgt/vendor/vue.min.js 因为和index同级就是相当于tenant-mgt的后面一级
1.2 那如果tenant-magt后面没有/呢,即localhost/tenant-mgt。这个时候./和/tenant-mgt同级即loaclhost/这一级
则请求的地址就变成了loacalhost/vendor/vue.min.js
所以最后是不是以 / 结尾很重要

  1. ‘/’表示绝对地址,无论部署的地址和浏览器中显示的地址是什么,请求静态文件的地址都是根路径

3.1history模式+不带固定前缀

1.前端打包配置publicPath为 ‘/’(重要,这里不能设置为相对地址,否则js等文件请求将会带上浏览器url上面的地址,导致请求404)
在这里插入图片描述

2.nginx配置为
在这里插入图片描述

location / {root   D:\frontend\console\dist(前端打包路径);index  index.html index.htm;try_files $uri $uri/ /index.html(必须,否则刷新时会404;
}

例:下图中/login是访问系统后跳转到的路由路径
在这里插入图片描述

3.1history模式+固定前缀

假设我们需要部署的地址的前缀是/test
1.设置路由的base值为/test
在这里插入图片描述

2.设置publicPath为 /
在这里插入图片描述

3.nginx配置

location / {root   D:\frontend\console\dist(前端打包路径);index  index.html index.htm;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/35931.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第2次作业

问题&#xff1a;cs与msf权限传递&#xff0c;以及mimikatz抓取win2012明文密码。 一、CS与MSF权限传递 CS&#xff08;Cobalt Strike&#xff09;和MSF&#xff08;Metasploit Framework&#xff09;是两种常用的渗透测试工具&#xff0c;它们都支持在渗透过程中传递权限。以…

1.3 Sqoop 数据同步工具详细教程

Apache Sqoop 是一个开源工具&#xff0c;用于在 Apache Hadoop 和关系型数据库&#xff08;如 MySQL、Oracle、PostgreSQL 等&#xff09;之间高效传输数据。Sqoop 可以将结构化数据从关系型数据库导入到 Hadoop 的 HDFS、Hive 和 HBase 中&#xff0c;也可以将数据从 Hadoop …

git 多分支实现上传文件但避免冲突检测

文章目录 背景实现步骤 背景 对于某些通过命令生成的配置文件&#xff08;如 TypeScript 类型文件等&#xff09; 实现步骤 1

背包问题(动归)

目录 问能否能装满背包&#xff08;或者最多装多少&#xff09;&#xff1a;dp[j] max(dp[j], dp[j - nums[i]] nums[i]); 对应题目如下&#xff1a; 416.分割等和子集 (物品正序&#xff0c;背包倒序) 问装满背包有几种方法&#xff1a;dp[j] dp[j - nums[i]] &#xff…

父级设置最大宽度,其宽度自适应子级中的内容

父级宽度自适应 1.父级限制最大宽度 2.子级竖着排放,每列的个数明确 3.父级的宽度跟随子级元素的个数变化宽度 tips: 因为父级要设置"background-color"属性,所以父级DIV必须要给明确的宽高,这就意味着纯CSS自适应宽度无法做到(好吧,是我做不到) HTML <temp…

茴香豆接入微信个人助手部署

将rag产品接入微信工作群&#xff0c;自动回答问题&#xff0c;香吗&#xff1f;&#xff1f; let‘s go 1、打开openxlab平台&#xff0c;找到茴香豆web产品应用中心-OpenXLab 点击进入&#xff0c;设置知识库名字和密码 2、上传知识库文件和编辑正反例等 3、然后进行测试问答…

电脑开机之后屏幕没有任何显示?怎么检查?

前言 最近有很多小伙伴来咨询&#xff0c;自己的电脑开机之后&#xff0c;屏幕真的是一点显示都没有&#xff0c;只有CPU风扇在转。 这个情况小白经常经常经常遇到&#xff0c;所以写一篇关于这个问题的排查教程。按照这个教程来排查&#xff0c;除非真的是硬件损坏&#xff…

算法第八天:leetcode234.回文链表

给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;head [1,2…

面向对象编程——python

目录 一、面向对象编程 1.1 类和对象 1.2 继承 1.3 封装 1.4 多态 1.5 Python中的面向对象编程 二、类、对象和变量 2.1 类&#xff08;Class&#xff09; 2.2.1 类的属性&#xff08;Class Attributes&#xff09; 2.2.2 类的方法&#xff08;Class Methods…

对类与对象的(二)补充

1.Date这样的构造函数 析构函数 拷贝构造 默认构造函数有三种 &#xff1a;全缺省的构造函数 无参的构造函数 和编译器默认生成的构造函数 class Date {pubilc&#xff1a;void Print&#xff08;&#xff09; { } private&#xff1a;//全缺省的int year1;int month1;int …

二叉树的广度优先搜索(层次遍历)

目录 定义 层序遍历的数据结构 实现过程简述 具体代码 定义 层序遍历就是从左到右一层一层地遍历二叉树。 层序遍历的数据结构 层序遍历需要借用一个辅助数据结构实现&#xff0c;由于队列具有先进先出的特性&#xff0c;符合一层一层遍历的逻辑&#xff0c;而栈先进后出…

PHP框架之Laravel框架

Laravel框架详解 Laravel&#xff0c;作为一款广受欢迎的PHP Web开发框架&#xff0c;以其优雅、简洁的语法和强大的功能特性&#xff0c;赢得了全球众多开发者的青睐。下面&#xff0c;我们将从Laravel的特点、应用案例以及具体的框架使用等方面进行详细解析。 一、Laravel框…

甲子光年专访天润融通CEO吴强:客户经营如何穿越低速周期?

作者&#xff5c;陈杨、编辑&#xff5c;栗子 社会的发展从来都是从交流和联络开始的。 从结绳记事到飞马传信&#xff0c;从电话电报到互联网&#xff0c;人类的联络方式一直都在随着时代的发展不断进步。只是传统社会通信受限于技术导致效率低下&#xff0c;对经济社会产生影…

LLaMA:挑战大模型Scaling Law的性能突破

实际问题 在大模型的研发中,通常会有下面一些需求: 计划训练一个10B的模型,想知道至少需要多大的数据?收集到了1T的数据,想知道能训练一个多大的模型?老板准备1个月后开发布会,给的资源是100张A100,应该用多少数据训多大的模型效果最好?老板对现在10B的模型不满意,想…

退市新规解读—财务类强制退市

一、退市风险警示&#xff1a;第一年触及相关指标 上市公司最近一个会计年度触及下列退市风险指标之一&#xff0c;公司股票或存托凭证被实施退市风险警示(*ST)&#xff1a; 第1项 组合类财务指标 仅发行A股或B股&#xff0c;最近一个会计年度或追溯重述后最近一个会计年度 …

Leetcode 102.目标和

给定一个正整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 ‘’ 或 ‘-’ &#xff0c;然后串联起所有整数&#xff0c;可以构造一个 表达式 &#xff1a; 例如&#xff0c;nums [2, 1] &#xff0c;可以在 2 之前添加 ‘’ &#xff0c;在 1 之前添加 ‘-’ &…

C#面:C#属性能在接口中声明吗?

在C#中&#xff0c;接口是一种定义了一组方法、属性和事件的类型。在接口中&#xff0c;只能声明方法、属性和事件的签名&#xff0c;而不能包含字段、构造函数或实现代码。因此&#xff0c;C#属性不能直接在接口中声明。 然而&#xff0c;你可以在接口中定义属性的签名&#…

VMware的具体使用

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 目录 一&#x1f324;️VMware的安…

用户登录错误次数太多锁定账号

当用户登录验证码错误次数太多时&#xff0c;需要限制用户在10分钟之内不能再次登录。 限制方案&#xff1a; 1.通过Redis ZSet key可以设置为用户名&#xff0c;value可以设置为UUID&#xff0c;score设置为当前时间戳 每次用户登录时&#xff0c;通过 rangeByScore 查询对…

Ubuntu22安装PyCharm

下载&#xff08;社区版&#xff09; 官网下载地址 解压 sudo tar -xzvf pycharm-community-2024.1.4.tar.gz 软件移动到指定目录下&#xff08;根据不同版本修改&#xff09; sudo mv pycharm-community-2024.1.4/ /usr/local/PyCharm/运行 cd /usr/local/PyCharm/pycha…