vue2打包部署到nginx,解决路由history模式下页面空白问题

news2025/7/17 22:30:35

项目使用的是vue2,脚手架vue-cli 4。

需求:之前项目路由使用的是hash,现在要求调整为history模式,但是整个过程非常坎坷,遇到了页面空白问题。现在就具体讲一下这个问题。

首先,直接讲路由模式由hash改为了history。

image-20240904163656543

在vue.config.js中的配置

image-20240904163743339

然后直接进行打包。

nginx的配置:

image-20240904170524090

此时,启动nginx,访问项目http://localhost:8000/。因为我在项目的路由中配置了重定向,所以重定向到了jTlist页面。

image-20240904170457396

此时,又来了一个新的需求!需有增加一个路由前缀,不能够直接访问/

于是,我在增加了如下路由配置:

image-20240904165144039

其他位置及nginx未做改动。

重新打包。

然后访问http://localhost:8000/aichat,成功访问,并成功重定向到/jTlist

image-20240904165256797

此时,问题来了!!点击刷新。

image-20240904165352958

页面空白,控制台出现了两个错误。

点开错误信息,看了一下,提示We're sorry but xx doesn't work properly without JavaScript enabled. Please enable it to continue.

个人理解的意思是好像什么js未加载进来。于是,我点开Network,看一下对js文件的请求是否有问题。

image-20240904165710553

找到了问题所在,

它本应访问的路径是http://localhost:8000/aichat/static/js/chunk-vendors.21d24282.js,结果访问了http://localhost:8000/aichat/aichat/static/js/chunk-vendors.21d24282.js

该问题困扰了很长时间,结果看到了一位大佬的文章。

参考文章:https://blog.csdn.net/weixin_42644340/article/details/119654050#:~:text=不带"#"既是his

在vue.config.js中进行修改:

image-20240904165930839

修改后重新打包。

成功访问,刷新后页面正常,问题成功解决。

注意:js找不到,还可能存在的问题是,入口文件index.html中通过script引入的文件,使用相对路径或其他,可能导致加载不到。

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

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

相关文章

【数据结构】排序算法(中篇)·处理大数据的精妙

前引:在进入本篇文章之前,我们经常在使用某个应用时,会出现【商品名称、最受欢迎、购买量】等等这些榜单,这里面就运用了我们的排序算法,作为刚学习数据结构的初学者,小编为各位完善了以下几种排序算法&…

AI随身翻译设备:从翻译工具到智能生活伴侣

文章目录 AI随身翻译设备的核心功能1. 实时翻译2. 翻译策略3. 翻译流程4. 输出格式 二、AI随身翻译设备的扩展功能1. 语言学习助手2. 旅行助手3. 商务助手4. 教育助手5. 健康助手6. 社交助手7. 技术助手8. 生活助手9. 娱乐助手10. 应急助手 三、总结四、未来发展趋势&#xff0…

chromadb 安装和使用

简介 Chromadb 是一个开源的嵌入式向量数据库,专为现代人工智能和机器学习应用设计,旨在高效存储、检索和管理向量数据。以下是关于它的详细介绍: 核心特性 易于使用:提供了简洁直观的 API,即使是新手也能快速上手…

LabVIEW 在故障诊断中的算法

在故障诊断领域,LabVIEW 凭借其强大的图形化编程能力、丰富多样的工具包以及卓越的功能性能,成为工程师们进行故障诊断系统开发的得力助手。通过运用各种算法,能够对采集到的信号进行全面、深入的分析处理,从而准确地诊断出系统中…

springboot 启动方式 装配流程 自定义starter 文件加载顺序 常见设计模式

目录 springboot介绍 核心特性 快速搭建 Spring Boot 项目 方式一:使用 Spring Initializr 方式二:使用 IDE 插件 示例代码 1. 创建项目并添加依赖 2. 创建主应用类 3. 创建控制器类 4. 运行应用程序 配置文件 部署和监控 部署 监控 与其…

Android学习之Material Components

以下是 Material Design 提供的核心控件列表(基于最新 Material Components for Android 库),按功能分类整理: 1. 基础按钮类 控件名称类名说明MaterialButtoncom.google.android.material.button.MaterialButton遵循 Material 规…

sentinel新手入门安装和限流,热点的使用

1 sentinel入门 1.1下载sentinel控制台 🔗sentinel管理后台官方下载地址 下载完毕以后就会得到一个jar包 1.2启动sentinel 将jar包放到任意非中文目录,执行命令: java -jar 名字.jar如果要修改Sentinel的默认端口、账户、密码&#xff…

Ubuntu 22 Linux上部署DeepSeek R1保姆式操作详解(Xinference方式)

一、安装步骤 1.基础环境安装 安装显卡驱动、cuda,根据自己硬件情况查找相应编号,本篇不介绍这部分内容,只给出参考指令,详情请读者自行查阅互联网其它参考资料。 sudo apt install nvidia-utils-565-server sudo apt install…

CTF类题目复现总结-hashcat 1

一、题目地址 https://buuoj.cn/challenges#hashcat二、复现步骤 1、下载附件,解压得到What kind of document is this_文件; 2、用010 Editor打开What kind of document is this_文件,发现是office文件; 3、将后缀名改为ppt时…

4月5日作业

需求: 1.按照图示的VLAN及IP地址需求,完成相关配置 2.要求SW 1为VLAN 2/3的主根及主网关 SW2为VLAN 20/30的主根及主网关,SW1和 SW2互为备份 3.可以使用super vlan 4.上层通过静态路由协议完成数据通信过程 5.AR1为企业出口路由器…

Bert论文解析

文章目录 BERT:用于语言理解的深度双向转换器的预训练一、摘要三、BERT介绍BERT及其详细实现答疑:为什么没有标注的数据可以用来预训练模型?1. 掩码语言模型(Masked Language Model, MLM)2. 下一句预测(Nex…

无招回归阿里

这两天,无招回归阿里的新闻被刷屏了。无招创业成立的两氢一氧公司无招的股份也被阿里收购,无招以这种姿态回归阿里,并且出任钉钉的 CEO。有人说,这是对 5 年前“云钉一体”战略的纠偏。现在确实从云优先到 AI 优先,但云…

初探:简道云平台架构及原理

一、系统架构概述 简道云作为一款低代码开发平台,其架构设计以模块化和云端协同为核心,主要分为以下层次: 1. 前端层 可视化界面:基于Web的拖拽式表单设计器,支持动态渲染(React/Vue框架)。多…

Redis(笔记)

简介: 常用数据类型: 常用操作命令: Redis的Java客户端: 操作字符串类型的数据: 操作Hash类型的数据: 操作列表类型的数据: 操作集合类型的数据: 操作有序集合类型数据: 通用命令…

bootloader+APP中,有些APP引脚无法正常使用?

问:bootloaderAPP程序中,为什么有些APP引脚无法正常使用?无法设置高低电平 主控芯片GD32F415,参考案例bootloader中的引脚使用: 参考案例APP程序的引脚使用: 以及个人使用的无线模组,高电平使能…

高并发内存池:原理、设计与多线程性能优化实践

高并发内存池是一种专门为多线程环境设计的内存管理机制,其核心目标是通过优化内存分配和释放过程,解决传统内存分配器(如malloc/free)在高并发场景下的性能瓶颈,显著提升多线程程序的内存访问效率。 目录 一、核心设计…

基于内容的课程推荐网站的设计与实现00(SSM+htmlL)

基于内容的课程推荐网站的设计与实现(SSMhtml) 该系统是一个基于内容的课程推荐网站,旨在为用户提供个性化的课程推荐。系统包含多个模块,如教学视频、教学案例、课程信息、系统公告、个人中心和后台管理。用户可以通过首页访问不同的课程分类&#xff…

生活电子常识--删除谷歌浏览器搜索记录

前言 谷歌浏览器会记录浏览器历史搜索,如果不希望看到越来越多的搜索记录,可以如下设置 解决 设置-隐私-自动填充表单 这个和浏览器记录的密码没有关系,可以放心删除

学习threejs,使用Texture纹理贴图,测试repeat重复纹理贴图

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️Texture 纹理贴图1.1.1 ☘️…

蓝桥杯基础算法-字符串与集合

对集合的考察集中在集合的特性和功能。 set-唯一性 list-有序性 集合元素的个数 思路分析:set的唯一性,取出重复的子串 eg: 下标0截取的范围:【0,最大下标】 下标1截取的范围:【1,最大下标…