Vue打包后出错：Tip: built files are meant to be served over an HTTP server. Opening index.html over file

最新推荐文章于 2024-05-28 16:22:32 发布
最新推荐文章于 2024-05-28 16:22:32 发布
阅读量2.5w 收藏 23
点赞数 9
分类专栏： Vue 文章标签： Vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhenmingyue123/article/details/90515566
版权

1、使用命令npm run build打包vue项目之后提示 ：
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file
打包App的项目使用的是Cordova命令建立IOS项目，把npm run build的dist文件放到www文件，
运行项目，打开app时index.html是空白页。
解决办法：config的index.js的build配置是默认assetsPublicPath为“/”根路径，把assetsPublicPath修 改为“./”同一个路径重新打包即可。
在这里插入图片描述
2.不会出现空白页后，图片显示不出来。
解决办法：在build目录下的untils.js文件中
ExtractTextPlugin方法中添加publicPath:’…/…/'就可以了。
然后重新打包，问题解决。在这里插入图片描述

前端小白123
关注
  • 9
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
built files are meant to be served over an HTTP server. Opening index.html over file:// won't work
小曦的博客
02-10 3862
npm run build之后，出现提示：Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won‘t work. 打开dist文件夹里的index.html文件，页面无法显示，控制台报错如下： 解决1：将绝对路径改为相对路径 **修改目标文件：**项目目录 &...
vue打包后显示空白正确处理方法
08-28
很多朋友遇到这样的问题当vue打包后显示空白问题，遇到这样的问题怎么处理呢？下面脚本之家小编给大家分享下vue打包后显示空白正确处理方法，感兴趣的朋友一起看看吧
Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won‘t
qq_43327962的博客
09-12 8009
vue-cli项目打包报错 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 报错原因 因为vue-cli的默认配置中,publishPath是用绝对目录, 所以dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的话, 可以在npm run build完成之后执行以下命令:npm install -g http-serve...
npm run build命令详解及使用示例
最新发布
Leon_Jinhai_Sun的博客
05-28 2066
npm run build命令详解及使用示例
Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't
热门推荐
信徒博客
09-24 2万+
vue-cli项目打包报错 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 报错原因 因为vue-cli的默认配置中, publishPath是用绝对目录, 所以dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的...
vue build打包后提示：Tip: built files are meant to be served over an HTTP server
qq_41554101的博客
03-03 2044
Vue 项目打包提示“Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.”
Tip: built files are meant to be served over an HTTP server.
兔子零
08-19 3680
Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won’t work. npm install -g http-server // 该命令只需执行一次, 安装过之后, 以后就不需要重复安装了. 就可以解决这个问题 ...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
10-16
在开发Vue项目时，我们经常会遇到打包（npm run build）后打开`index.html`页面出现空白，以及图片路径错误的问题。这两个问题对于项目的部署和运行是至关重要的，下面将详细解释这些问题的原因及解决方案。 问题一...
vue本地打开build后生成的dist文件夹index.html问题
10-16
主要介绍了vue本地打开build后生成的dist文件夹index.html问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
vue在index.html中引入静态文件不生效问题及解决方法
10-17
在Vue.js开发过程中，我们有时需要在`index.html`文件中引入静态资源，如CSS、JavaScript文件或图片等。然而，遇到静态文件无法正常加载的问题可能会导致应用样式或功能缺失。本文将深入探讨这个问题，并提供两种...
Vue打包遇到的问题
weixin_44151974的博客
06-01 561
使用命令npm run build打包vue项目之后提示 ： Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won’t work 解决方法： （1）文件路径问题，这里的解决方法是： 打开config文件夹下面的index.js，看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/‘改为‘./’ （
vue打包报错built files are meant to be served over an HTTP server.
肖肖肖丽珠的博客
03-05 1万+
Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 这个其实 就是个 提示并不是报错。 其实 这句话 是告诉 我们vue打包过后 需要放在服务端 才能预览 打开如果不放在 服务端不能正常运行的 如果你想正常...
webpack打包完成卡住不动 Opening index.html over file:// won‘t work.
XNHYJSL的博客
04-21 1223
原因：该库包的作用是本地能打开运行打包后的 index.html 文件。目前情况是服务器打包卡住（本地打包也是一样卡住），并不是需要 http-server 来打开文件在本地运行。1.修改 assetsPublicPath 对我项目没起作用。服务器端刚把 node10.x 升级到 16.9.x。记录一次webpack打包完成卡住不动bug。webpack打包bug。打包完成后一直停留在。欢迎大家评论区指正。
Vue项目npm run build后报错： built files are meant to be served over an HTTP server. Opening index.html...
H的博客
10-30 2376
Vue在执行npm run build打包文件时报错 点击index文件后打开的是一个空包页 问题： Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 打包的过程是执行cordova命令创建一个ios项目，然后生成dist文件夹，生成s...
vue项目npm run build打包 本地打开出现空白页 Tip: built files are meant to be served over an HTTP server
weixin_45484574的博客
09-29 1188
npm run build打包好出现如下警告： Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won’t work. 打开config文件夹下的index.js文件，把build里的assetsPublicPath由 ‘/’ 改为 ‘./’ 即可 找到项目所在目录，进入下图49行所示的文件目录 dist文件夹下的 index.html，双击就会在浏览器打开项目
vue打包问题：Tip: built files are meant to be served over an HTTP server.
weixin_30558305的博客
01-16 948
npm run build之后，出现提示：Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. npm run build的时候, 因为vue-cli的默认配置中, publishPath是用绝对目录, 所以dist文件夹里的文件必须放...
vue打包报错built files are meant to be served over an HTTP server
sunlizhen的专栏
11-12 726
Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 这个其实 就是个 提示并不是报错。 其实 这句话 是告诉 我们vue打包过后 需要放在服务端 才能预览 打开如果不放在 服务端不能正常运行的 如果你想正常打开 运行可以这样操作 在你 打包 npm run build 完成 之后直接输入npm ...
关于webpack打包vue项目后的页面body为空的问题
ShiYadong的专栏
03-19 3009
build之后,终端里会有个提示: Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.npm run dev是开发环境, npm run build是生产环境, 在开发环境完成代码和测试, 之后用生产环境生成代码,npm run bui...
vue文件预览报错 was loaded over an insecure connection. This file should be served over HTTPS.
11-22
这个错误提示表明你的Vue文件中引用的某些资源是通过HTTP加载的，而不是HTTPS。这可能会导致安全问题，因此浏览器会阻止加载这些资源。要解决这个问题，你需要确保所有的资源都是通过HTTPS加载的。 以下是一些可能导致这个问题的原因和解决方法： 1. 检查你的Vue文件中是否有使用HTTP链接的资源，例如图片、CSS文件或JavaScript文件。如果有，请将它们替换为HTTPS链接。 2. 如果你使用了第三方库或插件，请确保它们支持HTTPS，并且你已经正确地配置了它们。 3. 如果你使用了CDN，请确保它们支持HTTPS，并且你已经正确地配置了它们。 4. 如果你使用了自己的服务器，请确保你的服务器支持HTTPS，并且你已经正确地配置了它。 以下是一个可能的解决方法： ```html <template> <div> <img :src="imageUrl" /> </div> </template> <script> export default { data() { return { imageUrl: "https://example.com/image.jpg" }; } }; </script> <style> /* 使用HTTPS链接加载CSS文件 */ @import url("https://example.com/style.css"); </style> ```
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值