nginx部署多个项目;vue打包项目部署设置子路径访问;一个根域名(端口)配置多个子项目

本文解决:

  • vue打包项目部署设置子路径访问;
  • nginx部署多个子项目;
  • 一个ip/域名 端口 配置多个子项目;
  • 配置后,项目能访问,但是刷新页面就丢失的问题

注:本文需要nginx配置基础。基础不牢的可见文章:Nginx配置大全【六大使用场景、七大负载均衡策略、四大负载健康检查】

一、在根目录下的vue.config.js文件下,设置

// vue.config.js 配置说明
// 官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
module.exports = {// 部署生产环境和开发环境下的URL。// 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上// 如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署  https://www.xxx.vip/admin/,则设置 publicPath 为 /admin/。publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/",  
}//  process.env.NODE_ENV 检测当前的运行环境:开发(production)或生产(development)
// 如果开发和生产环境路径都一样,则直接: publicPath:"production"

二、在路由文件下配置(位置和文件名不固定,可以是src/router.js,也可以是src/router/index.js

//路由与组件引入
import Vue from 'vue'
import Router from 'vue-router'//创建路由对象
Vue.use(Router)export default new Router({// 根据开发环境,设置拼接路由base:  process.env.NODE_ENV === "production" ? "/admin/" : "/",//其他配置项
})

三、打包项目( 默认打包路径是项目根目录下的dist )

四、配置nginx

不会nginx基础配置的,请移步文章《Nginx配置大全【六大使用场景、七大负载均衡策略、四大负载健康检查】》

    # 配置访问子路径,(避免和文件路径定义冲突,下面采用子路由的说法)location /admin/ {# 指定前端应用的根目录,子路由访问,不能再使用root,需要使用aliasalias   D:/打包的dist路径/dist/;# 尝试匹配文件,如果找不到则重定向到  /子路由/index.html#  如果不加前面的路径,则会出现,页面能访问,但是不能刷新,一刷新就没的情况。try_files $uri $uri/ /admin/index.html# 指定默认的索引文件index  index.html index.htm;}

注意点(上面配置代码,每个注释都看一下,避免一些bug):在这里插入图片描述

五、如果需要配置多个项目,则重复以上操作。

常见问题bug:

1、nginx配置子路径的时候,缺失斜杆 /
2、指定根目录的时候,没有采用alias,而是采用了root。(两者区别下面会解析)
3、根目录后面,缺失斜杆 /
4、项目可以访问,但是不能刷新! 一刷新页面就没了:重定向没有加子路由路径try_files $uri $uri/ /子路由路径/index.html

扩展:root 和 alias 的区别

1、root指令:

root指令用于定义与请求URI的根目录关联的路径。
它会将请求URI中的斜杠后面的路径添加到指定的根目录后面。location /static/ {root   /var/www/;
}
如果请求的URI是/static/css/style.css,
那么Nginx会在/var/www/static/css/style.css路径下查找相应的文件。

2、alias指令:

alias指令用于将请求URI的一部分映射到文件系统中的另一个路径。
它会将请求URI中匹配location的部分替换为指定的路径。location /static/ {alias   /var/www/;
}
如果请求的URI是/static/css/style.css,
那么Nginx会在/var/www/css/style.css路径下查找相应的文件。

主要区别在于:
路径处理方式:root指令将请求URI直接附加到根目录,而alias指令会替换location匹配的部分。
路径结尾斜杠处理:root指令会自动添加斜杠,而alias指令需要在路径末尾手动添加斜杠以确保正确的路径映射。

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

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

相关文章

致力于打造一个操作最简单、功能最全面、创意最丰富的聊天记录管理工具

管理您的聊天数据 下载:https://download.csdn.net/download/mo3408/89497474 提供数据获取、导出、分析全栈式解决方案 获取信息 一键式操作,数据信手拈来 导出聊天记录 批量导出、自定义时间、消息类型任意选、Word、Excel、HTML、TXT想要哪个勾哪个…

在地图上根据经纬度,画一个矩型围栏,设置每个点的经纬度

在做一个需求时有一个小点就是添加一个配送区域(5公里直径内的)矩形围栏 我做的比较简单 大家看看有没有帮助, 也是精简代码。测试效果上相对是精准的 //谷歌,根据经纬度获取以它为中心半径为5公里内的矩形的四个点经纬度getDefalutPoints (lng: number, lat: num…

adb push 报错 ...error: failed to copy...

一、现象: 原因:没有权限导致的 二、解决方法: adb root adb remount #重新加载文件系统三、再次尝试:adb push xxx.apk /system/app 结果:成功

猫咖老板教你一招解决猫浮毛问题,质量好的猫用空气净化器分享

作为一名猫咖店老板,我经常被朋友问到关于宠物空气净化器的各种问题。有人认为这是个神器,而有人则认为这完全是花钱买智商税。其实我刚开始对购买宠物空气净化器也持怀疑态度,心想这么多钱花下去真的有效吗?但使用后,…

Axure教程:App侧边抽屉菜单交互制作

今天给大家示范一下抽屉菜单在Axure中的做法。在抽屉式菜单中,要实现两个交互效果,分别是: 交互一 抽屉菜单中1、2级菜单项的伸缩效果 实现逻辑:设置动态面板的切换状态及“推动/拉动原件”实现 交互二 菜单项的选中状态切换 …

vue的$nextTick是什么是干什么用的?

为什么需要使用$nextTick?他的使用场景 1.你在接口返回之后在获取高度 正常等页面加载在mounted这个钩子函数里 这时候就需要找到接口赋值的地方 这样就可以获取到数据操作以后的dom元素了 $nextTick是什么是干什么用的? $nextTick() 是 Vue.js 框…

iPad卡在白苹果开不了机怎么办?3种解决办法!

iPad开机卡在白苹果?iPad Air 黑屏重启白苹果?iPad Pro 莫名关机,开机白苹果无法启动?iPad mini 摔落、泡水等,开机一直显示白苹果,iPad出现这些情况怎么办? 无论是使用iPad、iPad Air、iPad P…

实验一 MATLAB \ Python数字图像处理初步

一、实验目的: 1.熟悉及掌握在MATLAB\Python中能够处理哪些格式图像。 2.熟练掌握在MATLAB\Python中如何读取图像。 3.掌握如何利用MATLAB\Python来获取图像的大小、颜色、高度、宽度等等相关信息。 4.掌握如何在M…

Jupyter Notebook 说明 和 安装教程【WIN MAC】

一、Jupyter Notebook 简介(来源百度百科) Jupyter Notebook(此前被称为 Python notebook)是一个交互式笔记本,支持运行40多种编程语言。 Jupyter Notebook 的本质是一个Web应用程序,便于创建和共享程序文…

深度解码:需求跟踪的艺术与实战应用

文章目录 引言一、需求跟踪的定义二、需求跟踪矩阵2.1 需求跟踪矩阵包含的内容2.2 跟踪矩阵层级2.3 需求属性2.4 参考表格 三、需求跟踪的收益3.1 确保商业价值最大化3.2 满足客户期望3.3 范围管理3.4 决策支持3.5 提高效率和效果3.6 文档化和沟通3.7 变更管理3.8 测量和改进 四…

数据库表导出到excel

数据库表导出到excel:前置知识1 ALL_TAB_COLS 数据库表导出到excel:前置知识2 Quartz基本使用 数据库表导出到excel:前置知识3 项目封装的Quartz实现动态定时任务 数据库表导出到excel:前置知识4 业务和效果 发起清单下载control层InventoryDownloadLogController /* * */ pa…

iPhone白苹果怎么修复?4个方法解决你的烦恼!

其实iPhone手机出现“白苹果”这事,如果是iPhone轻度用户,可能大家一辈子都不会遇到一次。但如果是iPhone重度用户、越狱爱好者、软件收集狂,可能就会遇到了。 白苹果,一般指iOS设备出现软、硬件故障,卡在一个类似于启…

EVM-MLIR:以MLIR编写的EVM

1. 引言 EVM_MLIR: 以MLIR编写的EVM。 开源代码实现见: https://github.com/lambdaclass/evm_mlir(Rust) 为使用MLIR和LLVM,将EVM-bytecode,转换为,machine-bytecode。LambdaClass团队在2周…

Entity Framework EF Migration 迁移

针对Code First来说关注的只有实体类。当需求变更时只需要添加新的实体类或者在实体类中添加、删除、修改属性即可。但是修改完成之后要如何将修改同步到数据库中? migration 机制就出现了 ●启用Migrations   ●通过Add-Migration添加Migration   ●Update-D…

k8s kubectl top pod报错error Metrics API not available

文章目录 1、场景2、解决方法1、确认Metrics Server是否已经在集群中安装2、安装metric-server组件2.1、组件地址2.2、组件与K8S集群版本对应关系2.3、apply资源清单文件2.4、验证Metrics Server正常工作 1、场景 在使用kubectl top pod 命令时遇到了error: Metrics API not a…

大语言模型融合知识图谱的问答系统研究

文章目录 题目摘要方法实验消融实验 题目 大语言模型融合知识图谱的问答系统研究 论文地址:http://fcst.ceaj.org/CN/10.3778/j.issn.1673-9418.2308070 项目地址:https://github.com/zhangheyi-1/llmkgqas-tcm/ 摘要 问答系统(Question Ans…

【持续更新】vs 编译过程中的问题及其解决方案

独立寒秋,湘江北去,橘子洲头。 目录 问题 1 : 无法查看或者打开 PDB 文件。 问题 2 : 命令提示符中查看运行结果,控制台闪退。 问题 3 : 某功能的判断条件:int val > 1e9,逻辑…

领导高水平,在管人上都会做这3点,让下属忠心耿耿

领导高水平,在管人上都会做这3点,让下属忠心耿耿 第一点:给到有面子 作为一个领导,一定要在另一方面给自己的下属做最大努力的争取,只有把利益给到位,让你的下属有面子,才能够真正的赢得下属的心…

命令行运行git reflog(reference log)报错的解决办法

文章目录 1. 检查 Git 是否已安装2. 检查 PATH 环境变量3. 重新安装 Git 在Git中, reflog的英文全称是 “ reference log”。意思是 引用日志(参考日志)。它记录了本地仓库中HEAD和分支引用所指向的提交的变更历史。这包括了你所有的提交&…

澳大利亚新闻.科技.汽车.旅行.商业类单发媒体

每日简报Daily Bulletin 澳大利亚西部时间ModernAustralian.com 澳大利亚垂直新闻.科技.汽车.旅行.商业类媒体,ModernAustralian.com是澳大利亚西部地区的一家权威媒体平台,提供全面的新闻报道、科技资讯、汽车信息、旅行指南、商业动态等内容。每日简报…