前端本地调试云效上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(抽象文档模式)

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

运维别卷系列 - 云原生监控平台 之 00.prometheus 监控汇总

以下是 运维别卷系列 - 云原生监控平台 相关的详细文章链接,相应的内容,也只是用来做入门使用的 运维别卷系列 - 云原生监控平台 之 01.prometheus 入门和部署运维别卷系列 - 云原生监控平台 之 02.prometheus exporter 实践运维别卷系列 - 云原生监控平…

eMMC和SD模式速率介绍

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

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

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

【C语言】5.C语言函数(1)

文章目录 1.函数的概念2.库函数2.1 标准库和头文件2.2 库函数的使⽤⽅法2.2.1 学习和使用2.2.2 头⽂件包含2.2.3库函数文档的一般格式 3.⾃定义函数3.1 函数的语法形式 4.形参和实参4.1 实参4.2 形参4.3 实参和形参的关系 5.return 语句6.数组做函数参数 1.函数的概念 函数也称…

C#【进阶】委托和事件

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

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

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

机器学习入门介绍

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

sklearn机器学习编程练习大全(一)

sklearn机器学习编程练习大全 第1题 计算DataFrame每列的缺失值比例第2题 填充缺失值第3题 使用常量填充缺失值第4题 使用最频繁出现的值填充缺失值第5题 过滤掉存在空值的行第6题 使用常量填充字符串列第7题 数值离散化第8题 虚拟编码第9题 提取元素的个数第10题 特征提取--是…

基于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.接口参数校验 接口的入参和返回值都需要进行校验。 入参是否不能为空,入参的长度限制是多少,入参的格式限制,如邮箱格式限制 返回值是否为空,如果为空的时候是…

VC++6.0自定义实现日志记录到文件及界面显示

1,实现日志记录到文件,支持日志文件大小限制,节省空间 void CController::LogWriteRecord(CString strText,CString strFileName) {CStdioFile csFile;try{BOOL bRet csFile.Open(strFileName,CFile::modeCreate|CFile::modeNoTruncate|CFi…

不相交集合的数据结构

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

【CSS基础】

4.CSS基础 4.1css的介绍 层叠样式表(英文全称:Cascading Style Sheets),是一种对web文档添加样式的简单机制,属于表现层的布局语言.4.2css基础语法 CSS语法由两部分组成:选择符、声明。 声明包括:属性和属性值选择符 {属性: 属性值 ;属性:…

docker 配置文件使用经验,后续持续增加

1. 容器中如何访问主机服务 在docker容器、docker compose 中如何访问主机服务呢? docker容器 20.10.0 版本在 linux 新增 host.docker.internal 支持: docker run -it --add-hosthost.docker.internal:host-gateway alpine cat /etc/hosts 127.0.0.…

leetcode hot100_part28_图论

目录 200.岛屿数量 DFS bfs 并查集 994.腐烂的橘子 207.课程表 DFS BFS 208.实现Trie(前缀树) 做完了这四题,总结一下,还是要掌握基本的dfs,bfs模版,都是在这些基础上变换的。 模版: …