🚀玄学报错之为什么我的JS配置文件会被打包其他格式
仅仅是配置文件的三行代码,是什么让它从配置文件js改头换面变成html的格式,这种叛变行为导致页面白屏,究竟是人性的扭曲还是道德的沦丧,不明不白的报错让我头疼一天,gpt一个回答直接解决问题,真不愧是人工智能。
先上问题
我盯着这个报错看了大半天,我是怎么也没想到一个小小的js文件会有这个大问题。
我的config.js
const Global_ = {
version:'hb',
}
就这三行简单的代码,怎么他就会报一个html类似的问题呢?当看报错,各位看官能知道是啥问题不?
我的打包文件夹及浏览器源代码
先上三张图
这是本地的public路径文件夹
这是打包后生成的dist文件夹,只是换了个名字
这个是浏览器本地开发查看源代码的样子,这个是重点,当前情况下,我的源代码是以usercenter为根目录,usercenter可以理解为dist,我也懒得改过来了
正常启动 不刷新页面的情况下
这里访问的是login页面,如果进入其他路由并且不刷新页面的情况下,这个dist会一直保存在login路由下的状态,此时下面的login就相当于index.html的入口页,并且可以正常访问到我的config.js
一切的原因都是发生在刷新页面的时候的改变
访问不同的页面,在浏览器本地开发查看源代码的格式是不一样的
在这个情况下我访问不同的页面,dist的格式都是不一样的,而且多了一层路由地址的文件夹,如果我访问的是system下的某个页面,源代码显示是这个样子的。
当我访问role下面的路由并且刷新页面的时候,会发生改变
你说你刷新之后按照路由去生成不同名字的入口名称,我都能理解,但是
请看下文
导致的问题
我config中的内容直接改变成入口文件的内容,访问不到config.js,config.js成替身了

我的老天爷我盯着这个报错看了一天
不是哥们你咋叛变了?你个js你变身了? 你咋就变成我高攀不起的样子了,你写index.html的东西干什么,我的配置文件呢?丢啦?
面向GPT编程
Q:vue项目打包后刷新页面包结构会发生变化
A:
如果在 Vue 项目中打包后刷新页面,可能会导致包解构发生变化的原因有几种:
- 路由模式: 如果你的 Vue 项目使用了前端路由(如 Vue Router),并且在路由配置中使用了 history 模式,而不是默认的 hash 模式,那么在刷新页面时服务器可能无法正确地解析路由,从而导致解构发生变化。这通常需要在服务器端进行一些配置以确保在刷新页面时能正确地返回应用的初始页面。
- 相对路径问题: 在 Vue 项目中,当你使用了相对路径引用资源(如图片、样式表等),这些资源的路径可能会在打包时被转换成相对于打包后的文件的路径。如果你的页面在不同的路径下被访问,可能会导致资源加载失败或路径不正确的问题,从而影响包解构。
- 缓存问题: 浏览器可能会缓存之前的资源文件,在刷新页面时可能会使用缓存的文件而不是重新下载最新的文件。这可能导致与预期不符的行为,因为你可能已经对代码进行了更新,但浏览器仍在使用旧的文件。你可以通过在开发阶段禁用缓存或使用版本控制来解决这个问题。
- 依赖项更新: 在打包过程中,你的项目可能会依赖于其他的 npm 包或第三方库。如果这些依赖项在更新后导致行为变化,也会影响到打包后的解构。
为了解决这些问题,你可以:
- 确保在部署 Vue 项目时正确配置服务器,特别是在使用 history 模式时。
- 使用绝对路径来引用资源,以避免相对路径问题。
- 在开发阶段禁用浏览器缓存,或者使用版本控制来管理文件版本,以确保浏览器获取到最新的文件。
- 定期更新项目的依赖项,以确保项目使用的库和包是最新的版本,且没有已知的问题。
解决问题:更换路由模式为hash
由于这个项目只是接手的,并不清楚是如何定制的路由规则,直接一看居然真的是用history来使用的路由模式,秉着实在没有办法信服GPT的情况,修改了路由模式为哈希,没想到真的解决这个问题
现在不管路由如何切换和页面刷新,都保持dist都保持在login页面,并且configjs不会被错误的解析。
如果觉得有趣或有收获,请关注我的更新,给个喜欢和分享。您的支持是我写作的最大动力!
转载自:https://juejin.cn/post/7362080157191290906