前端本地调试云效上Vue项目的构建产物

一、问题背景

前两天前端小伙伴,在云效上构建了一个前端项目,构建结果显示成功,访问后发现Console控制台报错:ReferenceError: defineComponent is not defined

在这里插入图片描述

在此之前的版本,构建和访问并没有此异常,而报错提示的文件此次版本也没有做任何修改。之后前端小伙伴,在本地改用yarn构建(云效使用的是npm),手动打包发布却是正常。

由于是生产环境,为了确定云效上自动构建的产物到底有没有问题,首先需要下载云效的构建产物,然后在本地还原ReferenceError: defineComponent is not defined错误后进行问题排查。

二、本地调试环境搭建

1.下载构建产物

在这里插入图片描述

将下载的构建产物解压到本地磁盘,比如本例:D:\Artifacts_2955644

2.Nginx配置

由于项目的Vue-router采用了history模式,则需要在本地配置启动Nginx:

①下载Nginx:
下载地址:https://nginx.org/download/nginx-1.26.0.zip

②配置nginx.conf:
编辑nginx-1.26.0\conf\nginx.conf,找到server节点:

server {listen       80;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location / {// 构建产物的物理目录,比如本例:D:\Artifacts_2955644\distroot  'D:\Artifacts_2955644\dist';index  /index.html;try_files $uri $uri/ /index.html;}# 接口转发location /xxx/xx {# 接口服务地址proxy_pass https://xxx.com;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
}

3.启动服务

可以使用以下方法之一启动Nginx:

(1)直接双击nginx.exe,双击后一个黑色的弹窗一闪而过
(2)打开cmd命令窗口,切换到nginx解压目录下,输入命令nginx.exe 或者 start nginx ,回车即可

检查Nginx是否启动成功:

(1)直接在浏览器地址栏输入网址 http://localhost:80,回车
(2)可以在cmd命令窗口输入命令 tasklist /fi "imagename eq nginx.exe"

关闭Nginx:

进入Nginx安装目录,可以使用以下方法之一关闭Nginx:

(1)输入nginx命令: nginx -s stop(快速停止nginx) 或 nginx -s quit(完整有序的停止nginx)
(2)使用taskkill: taskkill /f /t /im nginx.exe

Nginx命令:

名称命令
启动nginxstart nginx
修改配置后重新加载生效nginx -s reload
重新打开日志文件nginx -s reopen
测试nginx配置文件是否正确nnginx -t -c nginx.conf
关闭nginx :快速停止nginxnginx -s stop
完整有序的停止nginxnginx -s quit

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

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

相关文章

【设计模式】JAVA Design Patterns——Abstract-document(抽象文档模式)

🔍 目的 使用动态属性,并在保持类型安全的同时实现非类型化语言的灵活性。 🔍 解释 抽象文档模式使您能够处理其他非静态属性。 此模式使用特征的概念来实现类型安全,并将不同类的属性分离为一组接口 真实世界例子 考虑由多个部…

eMMC和SD模式速率介绍

概述 在实际项目开发中我们常见的问题是有人会问,“当前项目eMMC、SD所使用模式是什么? 速率是多少?”。这些和eMMC、SD的协议中要求的,要符合协议。接下来整理几张图来介绍。 eMMC 模式介绍 一般情况下我们项目中都是会支持到HS400 8bit 1.8V,最大时钟频率为200MHZ,通…

会议邀请函:Prometheus开源无人机平台-无人机追踪无人车代码实战|第四届中国智能汽车创新大会

扫描上方海报二维码,参与报名 阿木实验室:为机器人研发提供开源软硬件工具和课程服务,让研发更高效! 技术发展的日新月异,阿木实验室将紧跟技术的脚步,不断把机器人行业最新的技术和硬件推荐给大家。如果你…

C#【进阶】委托和事件

委托和事件 文章目录 1、委托1、委托概念2、基本语法3、定义自定义委托4、使用自定义委托5、委托变量可以存储多个函数6、系统定义好的委托思考 怪物死亡数据更新 2、事件1、事件概念2、事件的使用3、为什么有事件思考 热水器 3、匿名函数1、匿名函数概念2、基本语法3、使用4、…

iLogtail 社区开源之夏活动来了!

作者:玄飏 在这个充满活力的夏日,随着阳光一同灿烂的是开源精神的光辉与创新的火花。iLogtail 社区高兴地宣布,我们正式加入开源之夏 2024 的行列,诚邀每一位怀揣梦想与激情的学生开发者,共同开启一场探索技术前沿、贡…

机器学习入门介绍

各位大佬好 ,这里是阿川的博客 , 祝您变得更强 个人主页:在线OJ的阿川 大佬的支持和鼓励,将是我成长路上最大的动力 阿川水平有限,如有错误,欢迎大佬指正 目录 三大方向机器学习产生的原因机器如何学习…

基于springboot+vue+Mysql的大学生社团活动平台

开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:…

图文成片剪辑软件,分享3个专业的工具!

在数字化时代,图文成片剪辑软件成为了我们创作与表达的重要工具。无论是想要制作一段引人入胜的短视频,还是打造一幅精美的图文海报,这些软件都能助你一臂之力。那么,图文成片剪辑软件的方法有哪些?又有哪些值得一试的…

PHP开发中的不安全反序列化

序列化是开发语言中将某个对象转换为一串字节流的过程,转换后的字节流可以方便存储在数据库中,也可以方便在网络中进行传输。而反序列化则是将数据库取出的字节流或从网络上接收到的字节流反向转换为对象的过程。概念虽如此,但不同的开发语言…

ASP.NET在线二手交易系统的设计与实现

摘 要 随着当今社会信息技术的进步,基于互联网的各种应用日益受到了人们的重视,二手商品的重新利用也逐渐被人们关注,二手交易系统就在这种形势下产生了,它利用网络,改变了人们的购物方式。 本文是基于现代二手交易…

AC/DC电源模块的故障诊断与维修技巧

BOSHIDA AC/DC电源模块的故障诊断与维修技巧 AC/DC电源模块是一种常用的电力转换设备,用于将交流电转换为直流电供给电子设备。然而,由于使用环境和操作不当等原因,电源模块可能会出现故障。本文将介绍AC/DC电源模块的故障诊断与维修技巧。…

什么?你设计接口什么都不考虑?

如果让你设计一个接口,你会考虑哪些问题? 1.接口参数校验 接口的入参和返回值都需要进行校验。 入参是否不能为空,入参的长度限制是多少,入参的格式限制,如邮箱格式限制 返回值是否为空,如果为空的时候是…

不相交集合的数据结构

一、不相交集合的操作 不相交集合的数据结构维护了一组不相交动态集的集合 ,用集合中的某个成员作为代表标识集合。 集合在没有修改的情况下每次访问代表得到的答案是相同的,此外在其它一些应用中,可能按照规定选择集合的代表,例如…

WebSocket or SSE?即时通讯的应用策略【送源码】

最近在研究H5推送,发现除了我们常用的WebSocket以外,其实还有一种协议也能实现H5推送,那就是SSE协议。 而且,当前主流的大模型平台,比如ChatGPT、通义千问、文心一言,对话时采用的就是SSE。 什么是SSE协议…

100m/s高速轧制钢材 八轴测径仪检测毫无压力

关键词:八轴测径仪,在线测径仪,钢材测径仪,高速轧制 随着技术的提升,钢材的生产速度越来越快,一些高速生产的钢材,生产速度甚至达到了100m/s,这是一个非常快的速度。 如果汽车以120公里/小时的速度行驶,那么…

Unity WebGL全屏显示

一、删除footer节点 二、删除最下面点击事件绑定 修改Canvas宽高 canvas.style.width "960px"; canvas.style.height "600px"; 改成 canvas.style.width document.documentElement.clientWidth"px"; canvas.style.height document.document…

行为驱动开源免费接口测试框架:karate

什么是行为驱动测试: 行为驱动测试(Behavior-Driven Testing,简称 BDT)是一种测试方法,旨在通过描述系统行为和功能来编写测试用例。BDT的重点是从用户的角度出发,描述系统应该如何行为,而不是专…

DiskANN数据布局

_mem.index.data:和sift_base.fbin一模一样。0-3字节是总向量数,4-7是每个向量的特征数。后面就是依次放置的每个向量。 _disk.index:是存储的图,但是不光包含图也包含原始向量。前4KB不知道存的是啥。从第0x1000开始存放的是原始…

国内企业更喜欢私有化部署的 6 大原因

今天在 V 站看到一篇题为《为什么国内企业会更倾向于接受私有部署而不是 SaaS?》的帖子,觉得很有启发,这里把网友的观点稍作整理和总结,分享给大家参考。 在技术日益发展的今天,国内企业的软件部署方式似乎呈现出与欧…

【机器学习】机器学习:人工智能中实现自动化决策与精细优化的核心驱动力

🔒文章目录: 💥1.概述 ❤️2.机器学习基本原理 🛤️2.1定义与关键概念 🛣️2.2 机器学习算法 ☔3.自动化决策中的机器学习应用 🚲4.精细优化与机器学习的结合 👊5.挑战与前景 💥1.概述 …