前端打包后生成的dist 或 build目录,如何在本地启动服务运行

news2024/11/15 22:31:01

前端打包后生成的dist/build目录,如何在本地启动服务运行

运行npn run build,会打包后会产生 distbuild 目录
一般情况下,直接打开dist 或 build 目录下的 index.html会在浏览器看到内容。
然而发现网页一片空白,打开了控制台,看到一片404的各种找不到资源,或者出现跨域的提示

请添加图片描述

解决方案

  • server https://www.npmjs.com/package/server
  • http-server https://www.npmjs.com/package/http-serve
  • live-server https://www.npmjs.com/package/live-server
  • 在本地搭建express服务器
  • 使用nginx本地服务器

方案一

前三种基本使用方法是一致

以 live-server 为例:

  1. 全局安装live-server插件
npm install -g live-server 
  1. distbuild文件夹(刚刚打包成功后多出来的文件夹)终端输入
live-server
  1. 浏览项目
    默认监听在8080端口,打开浏览器,输入localhost:8080 就可以预览了

http://www.51sio2.cn//article/334864831.html

方案二

搭建express本地服务器

具体介绍:
https://www.pudn.com/news/63451f42272bb74d44499443.html

方案三

使用nginx本地服务器运行

具体介绍:
https://www.pudn.com/news/63451f42272bb74d44499443.html

方案四

手动起一个本地服务

具体介绍:
https://www.codenong.com/cs109000079/

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

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

相关文章

C++基础入门(引用补充)

1、使用场景做参数void Swap(int& left, int& right) {int temp left;left right;right temp; }做返回值int& Count() {static int n 0;n;// ...return n; }c语言内,出了count函数,n被销毁,会创建临时变量存储其值&#xff0…

DETR——使用Transformer进行端到端目标检测的开端之作

深度学习知识点总结 专栏链接: https://blog.csdn.net/qq_39707285/article/details/124005405 此专栏主要总结深度学习中的知识点,从各大数据集比赛开始,介绍历年冠军算法;同时总结深度学习中重要的知识点,包括损失函数、优化器…

寻根究底,为什么Docker中的Alpine Linux镜像能这么小

去年我发表了文章对Docker基础镜像的思考,该不该选择alpine,其中对于Alpine Linux镜像如此之小的原因我解释为它使用了musl而不是glibc 有人发现并指出了我的这个错误,说musl与glibc的大小差别不足以造成如此大的差距,应该别有原…

C++-静态局部变量

作者:翟天保Steven 版权声明:著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处 特征: 1.需添加关键字static。 2.在静态存储区分配内存,始终存在直到程序结束。 3.作用域为局部&#…

阿⾥云Apsara Clouder云计算专项技能认证:云服务器ECS⼊门【 个⼈所得税年度应纳税额抵扣 3600(0成本)】

文章目录 引言I 云服务器ECS⼊门II 考试III 个⼈所得税app填写专项附加扣除引言 适合⼈群:需要交个⼈所得税的上班族,有⼀定计算机基础结果:⼯资年收⼊10-20万的,能省下360元(3600*10%)I 云服务器ECS⼊门 云服务器(Elastic Compute Service, 简称ECS),是一种简单高效,…

PDPS教程:机器人气动点焊焊枪大开与小开运动状态自动切换设置

目录 概述 气动点焊焊枪运动状态设置 机器人气动点焊焊枪工具类型定义 气动点焊焊枪运动状态切换原理 气动点焊焊枪大开与小开状态切换设置 机器人仿真运行 概述 工业机器人点焊焊接过程中,为了提高焊接效率、优化焊接节拍、降低能源消耗,通常会在…

2022尚硅谷SSM框架跟学(八)Spring MVC基础三

2022尚硅谷SSM框架跟学 八 Spring MVC基础三8.RESTful案例8.1准备工作8.2功能清单8.3.具体功能:访问首页(1).配置view-controller(2).创建页面8.4具体功能:查询所有员工数据(1).控制器方法(2).创建employee_list.html8.5具体功能:删除(1).创建…

企业电子招投标采购系统源码之功能模块功能描述

​ 功能模块: 待办消息,招标公告,中标公告,信息发布 描述: 全过程数字化采购管理,打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力,为外…

激光焊接/点焊的特性及优势分析?

目前应用于生产的点焊方式大多为电阻点焊、电弧点焊、激光点焊和胶接点焊等多种点焊方法。其中激光焊接是激光材料加工技术应用的重要方面之一。 激光点焊机主要由激光器、电源及控制、冷却机、导光及调焦、双目体视显微观察几部分构成,结构紧凑,体积小…

Android中对图片的操作,移动、缩放、涂鸦和保存到图库

一、实现方法 监听用户手势,提取用户操作 (1)移动: 分别计算X,Y轴的结束与初始之间移动偏移的量 (2)缩放:(结束两指间距离伸缩比例)/ 初始两指间距离,scaleX…

云计算|OpenStack|社区版OpenStack安装部署文档(五 --- 计算服务nova安装部署---Rocky版)

前言: nova服务是openstack最重要的一个组件,没有之一,该组件是云计算的计算核心,大体组件如下: OpenStack Docs: Compute service overview 挑些重点,nova-api,libvirt,nova-pla…

最小生成树与最短路径

目录 一.最小生成树 1.1概念 1.2Kruskal算法 1.3Prim算法 二.最短路径 2.11单源最短路径--Dijkstra算法 2.1.2单源最短路径--Bellman-Ford算法 一.最小生成树 1.1概念 连通图中的每一棵生成树,都是原图的一个极大无环子图,即:从其中删去…

虹科分享|论企业网络安全的重要性

拥有有效的企业网络安全不仅仅是让你的员工创建一个不是他们宠物名字的密码--除非他们的猫的名字至少有12个字符长,由大小写字母和符号组成。无论是经过充分研究的鱼叉式钓鱼尝试,还是绕过MFA,威胁者都变得更加大胆。随着全球各行业数据泄露事…

判断是否为平衡树

对二叉树有困惑的小伙伴可以看一下我之前的文章:二叉树(一)_染柒_GRQ的博客-CSDN博客二叉树(二)_染柒_GRQ的博客-CSDN博客二叉树(三)_染柒_GRQ的博客-CSDN博客点击上方链接即可查看。题目110. 平…

Ext2explore查看ext2/ext3/ext4 file

比如想查看Android system.img,file看起来是ext2文件,file system.img system.img: Linux rev 1.0 ext2 filesystem data, UUID49e89c77-3dc4-553f-a392-7d11ff348228 (extents) (large files) (huge files)2、windows下怎么看呢,Ext2explore…

Springboot——常用注解及实例

一、常用注解解释:ConfigurationBeanResourceSpringBootApplicationRestControllerRestController 注解包含了原来的 Controller 和 ResponseBody 注解,使用过 Spring 的朋友对 Controller 注解已经非常了解了,这里不再赘述, Resp…

【BSV应用范例】区块链上的自我主权身份

发表时间:2022年6月27日 信息来源:bsvblockchain.org 自我主权身份(SSI)只是一个空想吗? (全球区块链组织联合创始人)Jorge Sebastio对此表示:“并非如此!” 更重要的是…

OS 学习笔记(7) 虚拟机

OS 学习笔记(7) 虚拟机 这篇笔记对应的王道OS 1.6 虚拟机,同时参考了 《Operating System Concepts, Ninth Edition》和 俗称ostep的《 Operating Systems: Three Easy Pieces》还有 《Operating Systems: Principles and Practice》 文章目录OS 学习笔记(7) 虚拟机…

软件测试之Android单元测试

根据维基百科的解释,单元测试又称为模块测试。是针对程序单元来进行正确性校验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序,函数,过程等,对于面向对象编程,最小单元…

STL——string类

一、标准库中的string类 1.string类文档介绍 (1)字符串是表示字符序列的类。 (2)标准的字符串类提供了对此类对象的支持,其接口类似于标准字符容器的接口,但添加了专门用于操作单字节字符字符串的设计特…