【BUG】gulp 打包（npm run build）停不下来或打包后首页一片空白的问题思考

最新推荐文章于 2024-05-26 23:00:15 发布
最新推荐文章于 2024-05-26 23:00:15 发布
阅读量2.2k 收藏
点赞数
分类专栏： BUG记录 文章标签： gulp npm vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/F_zmmfs/article/details/122140185
版权
博客探讨了Vue项目打包完成后出现的控制台提示，建议通过HTTP服务器查看而不是直接使用file协议。提到了可能的解决方案，包括检查Vue、gulp及Node.js版本是否匹配，并给出了针对Vue项目空白页面的常见原因和解决策略。
摘要由CSDN通过智能技术生成

正常的打包控制台


  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

[10:22:24] Finished 'build' after 32 s
[10:22:24] Starting 'create:versionCatalog'...
[10:22:24] Finished 'create:versionCatalog' after 742 ms
[10:22:24] Starting 'replace:cdnUrl'...
[10:22:25] Finished 'replace:cdnUrl' after 154 ms
[10:22:25] Starting 'replace:version'...
[10:22:25] Finished 'replace:version' after 7.76 ms
[10:22:25] Starting 'concat:config'...
[10:22:25] Finished 'concat:config' after 28 ms
[10:22:25] Starting 'cleanBuild'...
[10:22:25] Finished 'cleanBuild' after 50 ms
[10:22:25] Finished 'default' after 33 s

停不下来的控制台


  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.
光标在这里，只能终止

如果这是别人的项目，或者gulp是别人编排的，那么这里会快乐的把dict推到nginx上，然后一片空白，或者404。

原因1：我没遇到过，这里放其他博客。
搜索：Vue打包 发布页面 dict 空白

原因2：版本问题，不是gulp的版本就是gulp和nodejs的版本，nodejs更新太快，降低三个版本后和gulp4配合试一下。注意gulp3和gulp4不一样，看清项目版本

mmciel
关注
专栏目录
gulp安装以及打包合并的方法教程
10-18
本文将详细介绍如何安装gulp并使用它进行打包和合并操作，特别是针对JavaScript和CSS文件的处理。 首先，确保你已经安装了Node.js，这是运行gulp的基础。你可以访问`http://nodejs.cn/`下载并安装最新版的Node.js。...
gulp 4 (踩坑) 任务不执行
joy1793的博客
03-15 1277
gulp 4升级后 内部集成许多gulp 3 需要插件才能完成 1 gulp.watch 可以监控新增的文件 gulp-watch 2顺序执行 gulp.series 坑一 执行任务后只有 Starting 没有 Finished 且后续操作没反应 macdeMac-mini:webpack-test mac$ gulp server [16:59:01] Using gulpfile ~/p...
npm 编译完成后不退出
shankerzte的博客
03-17 2240
操作系统centos 7 版本如下 现象：执行npm run build 后，正常执行，编译成功，/dist下生成相应文件，但是npm进程不结束，ps 可查看到。低版本nodejs未出现此情况。 解决：build.js 最后增加强制退出。precess.exit(0) ...
修改完 gulpfile.js 里面的内容后 一定要执行 gulp 才会生效
weixin_44723840的博客
11-23 526
修改完 gulpfile.js 里面的内容后 一定要执行 gulp 才会生效 比如 watch 里面 又增加了 监听 css和js ，如果 不执行 gulp ，更改是不会生效的
项目最终的打包
m0_73089846的博客
10-17 3076
项目打包cdn处理方式简单总结
工程化-gulp简单使用实现自动化编译
weixin_43756060的博客
06-19 439
初始化项目 创建gulps空文件夹 进入文件夹执行npm init -y 初始化node项目 执行yarn add gulp -D 安装完成修改package.json "scripts": { "build": "gulp" }, 执行npx gulp --version查看版本 npm run build 执行gulp 配置gulp的任务 1. 初始化 在根目录下创建gulpfile.js文件 // 压缩、混淆js function js () { } // 对scss/les
使用gulp打包
qq_35275077的博客
04-29 400
安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 更换镜像 //更换 npm config set registry "http://registry.npm.taobao.org/" //查看 npm config get registry 在项目下安装cnpm的node_modules ...
nodejs实现简单的gulp打包
10-18
因为之前一直有人给我推荐...grunt熟悉以后实际上他的配置也不难，说到效率的话确实是个问题，尤其项目大了以后，目前位置遇到的项目都还可以忍受。不过不管怎么说，需要亲自用过gulp之后才能品评他和grunt之间的优劣。
解决vue+elementui项目打包后样式变化问题
11-19
博主刚刚解决了index.html空白问题，刚打开项目页面又发现了样式出现了大问题，样式与开发版本有很大不同，有些样式没有生效。利用搜索引擎， 找到了问题所在以及解决办法： main.js中的引入顺序决定了打包后css的...
gulp打包及发布静态资源流程
08-10
在JavaScript开发过程中，打包和发布静态资源是必不可少的步骤，特别是在构建复杂的前端应用时。`gulp`是一个流行的自动化工具，用于提升工作效率，处理文件、压缩代码、合并资源等任务。本篇文章将深入探讨`gulp`...
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
10-19
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解主要介绍了在Angular.js项目中使用gulp工具进行自动化构建、压缩、打包的详细步骤和方法。gulp是一个基于流的前端自动化构建工具，利用它能够有效提升前端...
gulp的简单用法
榴莲不好吃的专栏
08-28 388
gulp的简单用法:官网（https://gulpjs.com） 什么是gulp？ 　　gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。 　　gulp是基于Nodejs的自动任务运行器， 它能自动化地完成前端代码的测试...
Vue项目中npm run build 卡住不执行的几种情况(实战版)
最新发布
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
05-26 1564
一：比较常见是镜像导致的原因 我们可以找到build/check-versions文件 将这段代码注释,重新运行就可以解决这个问题。组件1中 import from ‘@/views/compontent/popup2’组件2中 import from ‘@/views/compontent/popup3’组件3中 import from ‘@/views/compontent/popup1’导致项目编译进入了死循环。
Vue项目打包后提示Opening index.html over file:// won't work.
热门推荐
小破孩的博客
06-11 1万+
最近使用npmrun build打包Vue项目是出现报错如下： 百度翻译： 提示：构建的文件应该通过HTTP服务器提供服务。 在文件：/上打开index.html不起作用。 它提示提示：建立文件是放在一个HTTP服务器。打开index.html文件：/ /不工作。当直接使用浏览器打开文件时，浏览器控制台会报错 因为vue-cli的默认配置中, publishPath是用绝对目录 ...
vue build打包后提示：Tip: built files are meant to be served over an HTTP server
qq_41554101的博客
03-03 2142
Vue 项目打包提示“Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.”
gulp打包工具使用总结
weixin_43023873的博客
08-21 326
环境安装： 1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp： npm install -g gulp 全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行： npm install gulp npm init 如果想在安装的时候把gulp写...
'gulp'不是内部或者外部命令 解决办法
HuangsTing的博客
04-09 1626
解决方法一：设置环境变量 1.计算机(右击)->属性->高级系统设置 -> 高级->环境变量 2.找到node全局文件路径，输入npm config get prefix npm config get prefix D:\node\node_global 这个路径就是node全局文件路径 在path里面添加;D:\node\node_global 3.关闭命令行窗口，重新打...
Vue 解决 npm run build 打包卡住不动的问题？
rulai2017的博客
07-01 7189
Vue 解决 npm run build 打包卡住不动的问题？
关于使用gulp出现的问题与解决方案
weixin_43898497的博客
05-11 1228
gulp版本过高带来的问题 今天学习gulp，在使用gulp命令进行打包压缩的时候，terminal提示如下错误（第一个问题）： AssertionError: Task function must be specified 查资料找到原因：gulp版本过高，可先通过gulp -v对gulp版本查询，我项目中（package.json）的gulp版本是4.0.0； 先说解决办法，后面说原因： 把package.json中的gulp版本改成4.0以下，如3.9.1,更改完以后在terminal中重新安装： n
为什么输入npm run build显示gulp不是内部命令
05-12
这可能是因为您在运行 `npm run build` 命令时，依赖的 gulp 模块没有正确安装或者未被添加到系统的环境变量中。您可以尝试以下解决方法: 1. 确认 gulp 是否已经正确安装。您可以在项目根目录下执行 `npm install gulp --save-dev` 安装 gulp 并将其添加到项目依赖中。 2. 确认环境变量是否已经正确设置。您可以在系统的环境变量中添加 gulp 所在的路径，例如：`C:\Users\YourUserName\AppData\Roaming\npm\node_modules\gulp\bin`。 3. 如果以上两个步骤都没有解决问题，您可以尝试重新安装 Node.js 并重新安装 gulp 模块。 希望以上方法可以帮助您解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值