在用vue-router构建项目时千万不要用a标签代替router-link标签,会变得不幸
待业在家,闲来无事。
用vue-cli写了一个没什么技术含量的页面框架,实现了一些小小的页面效果。
然后突然来了想法,想把这个项目部署到前段时间买的云服务器上看看,然后问题就出现了。
打包完vue-cli项目,自己本地打开看,居然打不开!!!(资源路径统统404)
看了眼打包出来的东西,所有的资源路径,都是那么的原汁儿原味儿。
经过排查我发现,在资源路径前加个打包文件夹名称就能解决那条资源路径404的问题,但那么多资源路径一条条搞我怕不是要累死。
人嘛,总是喜欢偷懒,作为懒狗当然要找出一次性就能解决重复劳动才能解决的方法。
说到vue-cli,在之前做毕设改bug的时候就了解到这个所谓的vue-cli和webpack有挺深的渊源,简单来讲就是用webpack构建的一个vue项目脚手架,而webpack本身就是个用来方便打包的工具。要想知道怎么解决这些问题,自然就需要去学一学个个玩意儿。
简单过了一遍webpack的教程,突然发现之前看不太懂的vue-cli配置指南,能看懂了一点。
害,废话了这么多,总而言之需要创建一个vue.config.js,配置一个publicPath,将publicPath配置为当前默认打包生成的文件夹的名字就行。于是页面的问题就解决了。
但是!!!这个故事还没有完结,不然也不会有这个标题了。
我尝试将页面分为Login和main两个大的主体,利用嵌套路由实现登录界面和操作界面的跳转。为了省事,就简单在Login界面写了个a链接跳转到main界面,这个操作在本地的node服务器上还是能够执行的。但当我打包部署到服务器,不行了!!!
点击链接只是访问了原来赋给a标签href的值,href的值没有被打包成publicPath所要的前缀路径。关于原因呢,我也不太清楚,但我知道main界面的router链接能够成功被打包成对应的格式,那么既然router能被成功打包那自然应该“用魔法打败魔法”,将a标签换成router-link就解决问题了。
最后有人看到的话我就顺便宣传一下我搭的MC服务器:1.16.5版本纯净服 地址jingjishiyong.xyz 。我家还蛮大的,可以直接睡觉(doge)
posted on 2021-10-24 13:03 你完全不写博客是吗? 阅读(690) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构