Vue软件服务不可用的分析过程及解决方案

简介: Vue软件服务不可用的分析过程及解决方案

一、背景


在公网Windows服务器上部署了基于Vue的业务平台,突然不能访问?怎么破?


二、解决思路


1、Nginx代理问题


首要怀疑是Nginx代理问题,查询端口情况如下所示,监听状态均变化为TIME_WAIT,以为找到了解决方案,搜索了该问题后发现不是个问题;

1666259375956.jpg


2、引用文件不可用问题


接着怀疑是js文件不可用问题,在谷歌浏览器开发工具的Network栏下发现Vue路由链接https://unpkg.com/vue-router@4.0.12/dist/vue-router.js不可用,访问返回结果为:

1666259572385.jpg

将其替换为https://unpkg.com/vue-router@4.0.12/dist/vue-router.global.js即可,心想这玩意怎么这么不靠谱,站点文件名称怎么说改就改啊,以为完事了,运行起来,在控制台窗口有如下错误:

1666259586984.jpg


3、Vue版本问题


这一下Antd和路由文件同时问题,且是属性"use"不可读,又考虑到前面文件失效的问题,综合分析后想着看看入口文件index.html吧,在文件有这一行引用:https://cdn.jsdelivr.net/npm/vue,可见没有指定具体Vue的版本值,心想很有可能是版本的问题,访问该网址发现版本是3.2.30,开发时明明采用Vue2版本。

1666259634458.jpg

而在项目依赖配置文件package.json中有:

1666259770904.jpg

将引用修改为:


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

OK,重新启动,熟悉的界面又回来了 😃。


三、总结


  1. 因为这个业务平台是1个月前开发,期间疏于管理,且没有形成配套的文档(说明文档、代码注释、部署文档、版本文档),查问题时回忆当时的开发过程占了大部分时间,有点陌生了;
  2. 服务不可用的尽头是版本问题;
  3. 自建CDN服务;
  4. 整理出Vue开发配套的版本依赖包很关键(作为下一步工作)。


相关文章
|
1天前
|
缓存 JavaScript
【vue】如何搭建拦截器和设置路由守卫(基于token认证)
【vue】如何搭建拦截器和设置路由守卫(基于token认证)
12 0
|
1天前
|
JavaScript
Vue 如何新建一个项目(如何安装依赖)
Vue 如何新建一个项目(如何安装依赖)
9 0
|
2天前
|
资源调度 JavaScript 开发者
插件使用:扩展Vue功能与第三方插件
【4月更文挑战第23天】Vue凭借其轻量级和灵活性在Web开发中备受青睐,而插件则进一步增强了其功能。本文探讨了如何在Vue项目中选择、安装、配置和管理插件,以适应不同需求。要点包括:选择可靠且兼容的插件,使用npm或yarn安装,根据文档配置,以及注意性能影响。明智使用插件能提升开发效率,但需避免过度依赖,确保与项目目标和技术栈匹配。不断学习新插件,可保持技术领先并优化项目实践。
|
2天前
|
设计模式 JavaScript 前端开发
Vue源码学习需要哪些工具和技能
【4月更文挑战第20天】学习Vue源码需具备的工具与技能:VS Code或WebStorm作为代码编辑器,Node.js与npm管理依赖,Git操作仓库。基础包括JavaScript、ES6+语法、前端知识(HTML/CSS/浏览器原理)及Vue基础知识。进阶则需源码阅读理解能力,调试技巧,熟悉设计模式和架构思想。学习方法强调系统学习、实践与持续关注Vue最新动态。
17 8
|
2天前
|
JavaScript 前端开发 编译器
Vue 源码学习路线
【4月更文挑战第20天】探索Vue源码涉及响应式系统、虚拟DOM、模板编译等核心概念。先掌握Vue基础知识、JavaScript(ES6+)和前端工程化。从源码入口文件开始,研究响应式、虚拟DOM、模板编译、实例方法、全局API及生命周期。理解编译器和渲染器工作原理,实践编写Vue插件,参与开源项目,阅读相关文章教程,持续关注Vue最新动态。这是一个循序渐进、需要耐心和实践的过程。
8 1
|
2天前
|
JavaScript 前端开发
鼠标监视 | 拖拽方块 | Vue
鼠标监视 | 拖拽方块 | Vue
8 0
|
3天前
|
JavaScript
Vue控制是否禁用disabled属性
Vue控制是否禁用disabled属性
10 1
|
3天前
|
JavaScript 前端开发
Vue鼠标悬浮切换图片
Vue鼠标悬浮切换图片
12 0
|
3天前
|
JavaScript 前端开发 内存技术
Vue入门:构建你的第一个Vue应用程序
【4月更文挑战第22天】Vue.js 入门教程:安装 Node.js 和 npm,使用 Vue CLI (`npm install -g @vue/cli`) 创建项目,选择预设或自定义配置。在 `src/components/` 创建 `HelloWorld.vue` 组件,显示数据属性。在 `App.vue` 中引入并注册组件,启动开发服务器 (`npm run serve`) 预览。开始你的 Vue 之旅!
|
3天前
|
JavaScript 前端开发 UED
动画效果:给 Vue 应用添加过渡和动画
【4月更文挑战第22天】Vue 框架提供强大的过渡和动画功能,增强用户体验,创建流畅的用户界面。通过CSS动画、设置过渡属性和自定义过渡,开发者能实现多样化效果。同时,结合组件状态、关注性能并测试优化,确保在不同设备上运行良好,打造引人入胜的应用交互。