关于用vue-cli打包dist文件无法在页面中访问

本地测试vue-cli打包后的dist文件 此方法可以自己本地写接口,自己打包vue-cli,然后测试打包后的文件是否正确。 1.本地获取自己写到的node.js接口 可能会遇到跨域的问题,可以看我的博客跨域问题 1.1.在vue页面中引入自己node.js写的接口(关于node.js的教程可以看我以前的博客) <template> <div class="hello"> <h1&g... 阅读详情

在尝试用了vue-cli开发项目之后,在项目的最终用npm run build 打包完之后,使用了wamp工具访问打包的文件,但是在页面中显示所有的链接都没有都是404.

因此我就查看了index文件中的所有的外部链接。

之后我就发现了在index文件里面

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>first</title>
    <link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>

<body>
    <div id=app></div>
    <script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js> </script> 
    <script type=text/javascript src=/static/js/vendor.2420502e2b2c7f321d64.js> </script>
    <script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js> </script> 
</body> 
</html>

所有的外部链接都是直接用/来连接的,但是这个/ 是默认的主目录中去

因此,就要在这些的外部文件的路径上加上./  这样就是在当前的目录中连接

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>first</title>
    <link href=./static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>

<body>
    <div id=app></div>
    <script type=text/javascript src=./static/js/manifest.2ae2e69a05c33dfc65f8.js> </script>
     <script type=text/javascript src=./static/js/vendor.2420502e2b2c7f321d64.js> </script> 
     <script type=text/javascript src=./static/js/app.b22ce679862c47a75225.js></script>
     <!-- 这里是因为没有加上./导致页面无法访问 -->
 </body> 
 </html>

 

vue-cli3打包上线时遇到的坑(打包后页面空白、接口404、进入二级页面刷新404) 前言: 刚开始以为打包上线挺简单的,不就是 cnpm run build打包然后把代码往服务器一扔吗。但是打包后发现遇到了各种问题,首先就是页面空白的问题,页面空白有两个原因,第一个是因为路径找不到造成的页面空白,第二个是渲染问题。其次就是后台接口404错误。在这里,我会建一个新的vue3项目,来重新走一遍打包时遇到的坑。 vue3打包上线后页面空白 vue3打包上线后调用后台接口... 阅读详情

相关推荐

vue笔记1:创建项目,打包本地运行dist,vue cli gitee pages部署运行404坑

打包本地运行dist 官方文档中的本地预览: dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值),所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如 serve: cnpm install -g serve # -s 参数的意思是将其架设在 Single-Page Application 模式下 # 这个模式会处理即将提到的路由问

qq_43594321的博客 2365

VUE3 发布后刷新无法访问(二级目录部署)

VUE3 发布后刷新无法访问(二级目录部署)

u011429803的专栏 1686

使用HBuilderX 打包 vue 项目 为 App 的步骤

这里,我的项目是vue-cli构建的工程,h5移动端页面。 由于开发成本并没有用安卓或ios原生语言来开发app,而是选择将现有项目直接打包。 下面我会分享一下HBuilderX 打包 vue 项目 为 App 的步骤。希望对有需求的同学提供帮助。 原vue项目打包dist文件 1、首先以及必须,将config文件夹里的index.js文件中assetsPublicPath由'/'改为 '...

ZHIYUANfL的博客 7106

在vue-cli项目中打包的 dist 静态文件不能直接双击打开访问解决方法-直接打开访问是空白的解决方法

在vue-cli项目中打包的 dist 静态文件不能直接双击打开访问-直接打开访问是空白的解决方法。这个就是以 http 协议来打开 网页。这样上面两种方法都可以打开打包好的 dist 下面的网页。vue-cli 默认的需要http协议才能打开,这里需要配置一行代码即可解决!如果不加,打开是空白的额,需要在服务器上,即使用 http 协议才能打开!......

厚积薄发. 6090

解决vue-cli2和vue-cli3项目分别打包后dist文件中index.html出现空白

是不是遇到过在vue项目在开发环境下一切正常,但在npm run build之后,打开dist文件中的index.html页面却是一片空白,打开控制台发现报错:Failed to load resource: net::ERR_FILE_NOT_FOUND 出现这个问题的话,需要查看自己使用的是vue-cli2还是vue-cli3,他们处理方式不一样。 一.vue-cli2处理方式: 项目中找到config/index.js文件,将assetPublicPath的路径改为“./”即可。 二.

Mini_小仙女的博客 2583

Vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错

vue-cli3.0修改打包后的文件地址和文件名vue-cli3.0修改打包后的文件地址和文件名问题描述修改文件名报错解决 vue-cli3.0修改打包后的文件地址和文件名 问题描述 最近开发一个web端vue项目时使用了vue-cli3.0搭建项目目录,开发过程中一切顺利,没有遇到什么问题,开发完毕打包上线时出现了问题,打包后的文件默认在dist目录下,打开index.html时发现不能运行,报...

weixin_43047977的博客 5270

解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题

三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题

青春木鱼的博客 3万+

vue-cli3 如何打包成zip压缩文件

前言 目前在我司,采用前后分离的方式开发,这就会面临一个问题。那就是部署到服务器时如何部署?我们之前的方式是:执行打包命令生成文件夹-> 将文件压缩成zip -> 将zip上传至服务器 ->解压缩 -> 重启服务。 在测试阶段每天都要回归bug,所以每天都要重复执行上述操作。有没有更自动化一些的方式来实现呢?就有了自动化部署,但我在研究自动化部署前,其实我是想在打包的时候自动生成zip文件,然后本地的脚本读取zip并上传至服务器,还有一种思路就是上传脚本可以进行打包压缩zip等。因为

黑山老妖的小站 3325

vuecli打包后的dist目录无法访问_Egg打包成可执行二进制程序

# 利用pkg打包Egg.js代码## 全局安装pkg npm i pkg -g## 动态 config 配置项目根目录添加 app.js```javascript// var fs = require('fs');class AppBootHook { constructor(app) { this.app = app; }}module.exports = AppBootHook...

weixin_39652760的博客 295

vue-cli项目打包后部署到Nginx,axios请求接口404报错

一、vue-cli打包 打包前,修改两处路径,一个是在vue.config.js下添加以下代码 module.exports = { // 打包前修改静态文件路径 publicPath: '/目录名',//Nginx下html文件夹里创建的目录名 devServer : { proxy : { '/api' : { ...

fj1247565817的博客 6150

UDS诊断入门第一课:手把手教你玩转0x10会话控制服务(附ISO14229实战解析)

刚接触汽车电子诊断的工程师们,往往会被厚厚的ISO 14229标准文档和各种专业术语吓退。但就像学习编程要从"Hello World"开始一样,掌握UDS协议的最佳切入点就是0x10诊断会话控制服务。这个看似简单的服务,实际上是整个诊断系统的"钥匙"——它决定了ECU(电子控制单元)当前处于何种工作模式,直接影响着其他诊断服务的可用性。 在实际车辆诊断中,ECU默认处于DefaultSession模式,这种模式下许多高级诊断功能是被禁用的。想象一下你正在开发一个需要刷写ECU固件的工具,如果连最基本的会

weixin_30402343的博客 393

三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题

Vue打包后生成的dist文件中的index.html,双击在浏览器中打开后发现一片空白,打开控制台有很多报错:“Failed to load resource: net::ERR_FILE_NOT_FOUND”。2. 将index.html中资源引用的绝对路径改为相对路径;这是因为dist文件是需要放在服务器上运行的,资源默认放在根目录下。可以打开浏览器在localhost:8080中查看了。,此时可以双击index.html在浏览器中正常访问了!指向磁盘根目录,所以找不到引用的文件。

m0_66051368的博客 8937

S7-1200模拟量

将两种不同的金属或合金金属焊接起来,构成一个闭合回路,利用温差电动势来测量温度,当两端存在温度梯度时,回路中就会有电流通过,此时两端之间就存在电动势--热电动势,这就是所谓的塞贝克效应(seebeck effect)。温差越大,热电动势越高。热电偶是有正负极性的,所以需要确保导线连接到正确的极性,否则会造成明显的测量误差。为了使温度补偿达到最佳效果,必须将热电偶模块安装在温度稳定的环境中简述:两种金属,每一种金属随温度变化是不同的,出现温差--由俩金属构成的回路就会有电流经过,因此两端形成热电动势。

王阿妹小天才的博客 2593

Vue项目的打包方式(生成dist文件)

打包vue项目,生成dist文件夹。

商务合作 | 共同学习 | 携手共进 18万+

AI智能体项目管理框架agent-pm:从原理到实战的多智能体协作指南

在人工智能和自动化技术快速发展的今天,多智能体系统已成为实现复杂任务自动化的重要技术路径。其核心原理在于通过任务分解、角色分配和状态管理,让多个AI智能体像人类团队一样协同工作,从而突破单个模型的性能边界。这种架构的技术价值在于将软件工程中成熟的项目管理方法论引入AI领域,显著提升了自动化流程的可预测性、可观测性和可复用性。在实际应用场景中,多智能体协作框架能够高效处理从代码开发、文档撰写到数据分析等一系列任务,尤其适合需要多步骤、多专业协同的复杂项目。本文聚焦的agent-pm框架,正是这一领域的典型实践

weixin_42533910的博客 714

如何在 VMware Workstation 虚拟机中利用 Nvidia 显卡的硬件加速功能

本文详细介绍了在VMware Workstation虚拟机中配置Nvidia显卡硬件加速的完整流程。重点包括:检查硬件兼容性、安装显卡驱动、编辑VMware配置文件启用PCI直通功能(需修改config.ini文件参数)、为虚拟机分配PCI设备等关键步骤。文章特别强调了配置注意事项,如系统资源需求、BIOS设置要求、驱动兼容性等问题,并建议操作前备份数据。通过此方法可实现虚拟机对Nvidia显卡的直接调用,适用于需要GPU加速的计算场景。

qq_39777550的博客 6703

vue打包后copy一些静态资源文件到dist,可通过url直接访问

vue打包后copy一些静态资源文件到dist,可通过url直接访问 若打包后的dist文件里没有static文件,有些需求会想要访问到项目中的某些静态资源文件,而vue打包并没有把static文件打包进去,这就需要在打包后copy目标文件到dist里面 找到package.json文件,配置build如下"build": "vue-cli-service build && no...

qq_41596411的博客 4371

SORT算法在遮挡下总跟丢?深入OC-SORT源码,拆解其三大创新点如何解决卡尔曼滤波的顽疾

本文深入解析OC-SORT算法如何通过三大创新点解决多目标跟踪中的卡尔曼滤波顽疾。OC-SORT引入在线平滑虚拟轨迹技术(OOS)、观测中心动量匹配机制(OCM)和基于最后观测的轨迹恢复(OCR),显著提升了遮挡场景下的跟踪性能。实验数据显示,相比传统SORT算法,OC-SORT在MOT17数据集上MOTA提升5.7%,遮挡恢复成功率提高64.2%,为Multi-Object Tracking领域带来突破性进展。

weixin_42547431的博客 241

vue访问目录下的html页面,vue-cli打包后本地运行dist文件中index.html的方法

vue-cli打包后本地运行dist文件中index.html的方法发布时间:2020-08-13 12:01:32来源:亿速云阅读:773作者:小新这篇文章给大家分享的是有关vue-cli打包后本地运行dist文件中index.html的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。使用npm run build生成dist文件夹中的文件是你需要上传到服务器上的文...

weixin_39598584的博客 1802

GSEA富集分析实战:从数据准备到结果解读的完整R代码指南

本文提供了一份完整的GSEA富集分析实战指南,涵盖从R环境准备、数据质量控制到基因ID转换、参数优化和结果解读的全流程。通过详细的R代码示例和实用技巧,帮助研究人员高效完成基因集富集分析,特别针对生物信息学中常见的GSEA分析痛点提供了专业解决方案。

weixin_29246195的博客 537

点云从入门到精通技术详解100篇-基于 CBCT 与口内扫描数据的牙齿点云配准

口扫生成的三维牙模型只包含牙冠结构,容易受到唾液、食物残留等杂质的干扰。像精度,但其扫描成本较高,在公立医院的普及率较低。此外,口扫探入式的体。完整、精确的牙齿信息,有助于医生更好地进行数字化辅助诊疗,提高手术的预。可以表示上颌骨、下颌骨、牙冠以及牙根的位置和形状,但其扫描分辨率较低,精配准前实现粗略的预配准来确定点云间的初始位置,为精配准提供良好的配准。该算法通过计算点对间的距离确定源点云中的某一点在目标点云中的对应。算两点之间的欧氏距离,运算量较大,而且由于算法只考虑点集间的距离而忽略。

getusushu的博客 1641

解决:vue打包后在本地运行dist文件夹中index.html出现空白页面

vue开发项目是不是遇到过在vue项目在开发环境下一切正常,但在npm run build之后,打开dist文件中的index.html页面却是一片空白,打开控制台发现报错:Failed to load resource: net::ERR_FILE_NOT_FOUND 出现这个问题的话,需要查看自己使用的是vue-cli2还是vue-cli3以上,他们处理方式不一样。 一.vue-cli2处理方式: 项目中找到config/index.js文件,将assetPublicPath的路径..

kxbkk的博客 8799

ParaView :在paraview创建渲染视图

ParaView :在paraview创建渲染视图

希望我的博客,能帮上你解决学习中工作中所遇到的问题 1306

vue工程打包后dist目录下无css目录,页面无css样式

新建vue工程,在打包test环境部署到docker出现无css样式,dist下无css文件夹; prod环境正常,有css样式,dist下有css文件夹。 本地npm run serve正常,prod环境正常,打包dev和test异常。 查看vue-cli文档,https://cli.vuejs.org/zh/config/#css-extract 有这一段 css.extract Type: boolean | Object Default: 生产环境下是 true,开发环境下是 false 是否将

weixin_43250455的博客 3249

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

Vue 2项目打包后dist中index.html用浏览器无法直接打开

Vue 2项目打包后dist中index.html用浏览器无法直接打开

白白白鲤鱼的博客 1702

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

使用 vue 项目打包后,尝试使用打开 dist 目录下的 index.html,页面空白

问题描述:使用 vue-cli 打包项目后,尝试使用打开 dist 目录下的 index.html,页面空白。 解决办法:打开 config 文件夹里的 index.js,修改 build 里 assetsPublicPath: ‘/’,为 assetsPublicPath: ‘./’,再次执行 npm run build 能够正确显示。代码如下: build: { index: path.r...

LonewoIf的博客 3709

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

上一篇: vue-loader@15.x VueLoaderPlugin无法loader
下一篇: 用vue-cli引入element-ui报错
bigfatDone
博客等级 码龄8年 9粉丝 39原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值