vue项目打包后出现页面布局异常、图片显示不出来等问题

       通常我们写完vue项目后,会执行 npm run serve 对项目进行打包。执行完后,就在项目的目录中生成dist文件夹。一开始,我以为双击dist文件夹里index.html会把打包后的项目运行起来,结果在浏览器看到的页面布局异常以及许多图片没有加载出来,再看下控制台,报了下面的错误:Failed to load resource: net::ERR_FILE_NOT_FOUND

 

 一开始我认为是webpack版本的问题导致项目打包时出现异常,于是就不断地降低版本,结果还是和之前一样。最后,我发现了前面出现的异常的原因是index.html在加载一些js、css、图片的资源时,出现路径不正确的情况。最终,我通过另一种方法(基于node.js的express框架来搭建一个微型服务器)来解决问题。

基于node.js的express框架来搭建一个微型服务器(以vscode为例):

一、我们先将一个文件夹,打开vscode的终端(输入 Ctrl + ` 或是 点击下面的选项) 

 

二、在终端中输入npm init -y后,会在文件夹目录中看到package.json文件,之后再输入 npm i express

 如果看到下面标记的地方,说明express插件安装成功

 三、把之前打包好的dist文件复制进来,再新建app.js文件,把下面代码复制进去:

let express = require('express');let app = express();app.get('/',function (req,res) {res.send('我是首页');
})app.use(express.static('./dist/'));app.listen(8088,function () {console.log('服务器启动成功: http://localhost:8088');
})

 8080是该微型服务器的端口号,如果被占用了请自行更换一个。

四、在终端执行 node app.js 命令,把服务器运行起来,最后在浏览器中输http://localhost:8088/index.html就可以看到成功运行后的项目。

 

 

 

 

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

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

相关文章

word无法显示图像计算机可能没有足够的,Word图片显示不出来怎么办 Word图片显空白的解决办法-电脑教程...

最近百事网小编钢琴下的旋律发来了一些Word投稿文档,不过奇怪的是Word里边的很多图片都显示不出来,原先以为可能是图片过多,可能一下子没载入完,不过等待很长一段时间后,很多Word里边的图片依旧显示不出现,…

java 选择图片 显示不出来的_java图片显示不出来怎么办

java图片显示不出来怎么办? 解决javaweb项目使用Tomcat服务在网页中的某些页面中的图片无法显示问题。 最近写了一个web项目,但在浏览器中测试,发现某些页面中的图片无法显示。 推荐教程:《java学习》 原因是在加载页面时一些img标…

html显示网上图片不显示不出来,网页图片显示不出来,教您网页不显示图片怎么办...

在使用电脑浏览网页的时候是不是有碰到过网页不显示图片的时候?可能因为是网速慢,所以造成加载图片失败;当然也有其他的原因,像有些地方设置错误的话也会导致网页图片显示不出来的。下面,小编跟大伙一同探讨一下网页不显示图片的解…

java界面怎么加图片不显示不出来_java图片显示不出来怎么办,

详细内容 java图片显示不出来怎么办? 解决javaweb项目使用Tomcat服务在网页中的某些页面中的图片无法显示问题。 最近写了一个web项目,但在浏览器中测试,发现某些页面中的图片无法显示。 推荐教程:《java学习》 原因是在加载页面时…

html背景图片为什么找不到,css中背景图片显示不出来

css中背景图片显示不出来 css添加背景图片无法显示,有以下几方面原因: 1、css没有被调用;请检查css调用是否成功。 2、css图片地址不对;请检查css图片地址是否正确。 3、div的高度没有固定,是auto或者没有设值&#xf…

python中html图片显示不出来,jupyter notebook中图片显示不出来的解决

报错: d:\program files\anaconda3\lib\site-packages\matplotlib\figure.py:445: userwarning: matplotlib is currently using module://ipykernel.pylab.backend_inline, which is a non-gui backend, so...... 解决方法: import matplotlib matplotl…

图片路径带有blob的图片显示不出来

做项目写个人信息页面时,后端返回的数据中,图片的路径带有blob(如下图) 前端展示的时候渲染不出来,重新上传后,图片正常,但是刷新后还是不显示。图片上传用的element ui的图片上传组件&#xff…

解决上传 Gitee 后图片显示不出来

上传后图片总是显示不出来,例如 可以直接把路径替换成 Gitee 项目上传后的网络路径 点开上传 Gitee 后的图片所在的路径,随便点开一张图片,点击原始数据 点开后图片所在路径如下 在然后直接全部替换图片的文件夹路径 替换的时候替换 图片…

如何解决上传到github上的图片显示不出来的问题

你有没有遇到上传github仓库的图片,显示不出来的情况,或者是仓库的README.md文件,插入的图片总是莫名其妙的无法显示,而且重新编辑也没什么卵用。 于是我们可以使用chrome或是edge浏览器,F12打开开发者工具,你会发现获…

【C++】C++ 引用详解 ⑦ ( 指针的引用 )

文章目录 一、二级指针可实现的效果二、指针的引用1、指针的引用 等同于 二级指针 ( 重点概念 )2、引用本质 - 函数间接赋值简化版本3、代码示例 - 指针的引用 一、二级指针可实现的效果 指针的引用 效果 等同于 二级指针 , 因此这里先介绍 二级指针 ; 使用 二级指针 作为参数 …

Arduino驱动TEMT6000传感器(光照传感器篇)

目录 1、传感器特性 2、硬件原理图 3、驱动程序 TEMT6000是一个三极管类型的光敏传感器,其光照强度和基极的电流成正比。用起来也相当简单,可以简单的连接该传感器的基极到模拟电压输入,通过简单的检测电压值就可以判断当前的光照强度。 1、

python增强现实

1,在一平面上放一个立方体 实现代码: from pylab import * from PIL import Image# If you have PCV installed, these imports should work from PCV.geometry import homography, camera # from PCV.localdescriptors import sift"""…

Python+OpenCV实现增强现实!快来召唤你的库洛牌!!!

相信大家都看过或者听过《摩卡少女樱》这部动漫,是不是非常羡慕小樱能够从库洛牌中召唤出各种各样会有魔法的人呀?! 今天,博主就来教教大家如何实现召唤吧!!!学会以后相信你一定可以召唤神龙滴&…

Logstash【从无到有从有到无】【简介】【L2】Logstash入门

目录 1.Logstash入门 1.1.安装Logstash 1.1.1.从下载的二进制安装 1.1.2.从包存储库安装 1.1.3.使用Homebrew在Mac上安装Logstash 1.1.4.使用Homebrew启动Logstash 1.1.5.Docker 1.2.简单使用 1.3.用Logstash解析日志 1.3.1.配置Filebeat以将日志行发送到Logstash 1…

dojo框架笔记

一、模块定义 1、定义只含值对,没有任何依赖的模块(moudle1.js) define({ color: "black", size: "unisize" }); 2、定义没有任何依赖,但是需要一个准备活动的函数(moudle2.js) define…

Flutter技术与实战(5)

Flutter进阶 文章目录 Flutter进阶如何构造炫酷的动画效果Animation、AnimationController与ListenerAnimationWidget与AnimationBuilderhero动画 单线程模型怎么保证UI运行流畅Event Loop机制异步任务异步函数Isolate HTTP网络编程与JSON解析HTTP网络编程HttpClienthttpdioJSO…

Styling FX Buttons with CSS

http://fxexperience.com/2011/12/styling-fx-buttons-with-css/ ———————————————————————————————————————————————————————— Styling FX Buttons with CSS December 20, 2011 By Jasper Potts A number of people h…

使用机器学习模型对大盘指数进行预测

作者:子楠 链接:https://zhuanlan.zhihu.com/p/24417597 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 用数学模型分析策略,可以避免由于情绪波动的造成的影响,避免一些…

大盘趋势图强弱分析 通达信大盘多空指标公式 副图不加密

判断大盘走势图的四大技巧有哪些? 答:1.消息面、政策面、经济面。2.技术面。技术面上最重要的是成交量。3.利用领涨股。一般一波行情的发展都会由一只或几只领涨股引领,对他们本身进行分析进而了解市场主力所盯紧的热点,然后判断…

通达信 红线精准主升浪波段买卖选股指标 蝶形飞扬副图公式源码

波段神器,无未来,信号极其准确,不是好用的指标不好分享给大家! 这是指标用于显示选股下单的信号,只显示安全的做多做空信号,所以信号较少,少而准!对比一下就知道了! 一个能及时提示上涨和下跌,有兴趣的朋友可以下载来试试! 指标用…