【爬坑日记】npm build之后，打开dist文件夹下index.html为空白页

最新推荐文章于 2024-03-20 15:29:55 发布
最新推荐文章于 2024-03-20 15:29:55 发布
阅读量3.6k 收藏 2
点赞数
CC 4.0 BY-SA版权
文章标签： git javascript ViewUI
原文链接：https://juejin.im/post/5b35d297e51d4558ca67460b
本文介绍了解决项目构建后出现空白页的问题。通过调整config/index.js中的build属性配置，将路径从根目录‘/’改为当前目录‘./’，确保资源正确加载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

写完一个项目后，执行npm run build后，生成dist文件夹，用浏览器打开index.html文件会发现是空白页，报错如图

说明引用路径错误

需要去项目目录下的 config/index.js 文件修改build属性配置

默认的是‘/’（根目录）

修改成‘./’（当前目录）

再执行

npm run build
复制代码
解决vue-cli2和vue-cli3项目分别打包后dist文件中index.html出现空白
Mini_小仙女的博客
07-08 2446
是不是遇到过在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的路径改为“./”即可。 二.
vue项目打包后打开index.html一片空白
最新发布
ai
03-16 1968
首先，我们来解释一下vue脚手架项目启动项目的原理，其实，在你使用 npm run dev或npm run serve的时候，实际是临时创建了一个webpack-dev-server或vue-cli-service serve的node服务器，为了方面后面的 hot-reload（热重载）的需求，必须所有的更新都要在服务上处理后进行更新，如果你是单纯用file协议打开静态网站的方式，是没有办法做到这个处理的，如果可以，也是需要编译和重载的，成本很高昂。http模块是node.js原生模块中最为亮眼的模块。
解决：vue打包后在本地运行dist文件夹中index.html出现空白页面
m0_55333789的博客
01-09 1234
解决：vue打包后在本地运行dist文件夹中index.html出现空白页面
那些年我们在Vue中踩过的坑--打包后发现index.html为空白
weixin_45405395的博客
04-04 638
项目中使用的是vuecli3,项目完成后，执行npm run build打包，发现dist文件夹中index.html运行到网页上是空白的，这个要怎么解决的那？ 原因：是因为打包后，项目文件的路径出现了问题，打包后使用的是绝对路径，绝对根目录路径，所以造成我们的资源无法被正常的解析。 解决办法：要使打包后的文件使用相对路径。 在vuecli3项目中新建vue.config.js文件，配置如下： m...
vue项目 npm run build 后打开 index.html 空白,某些图片字体文件加载不出来解决办法
qq_39398332的博客
08-29 3312
1、修改config下面的index.js中bulid模块导出的路径 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist')...
react项目打包后，浏览器直接打开dist/index.html页面出现空白
zsy_1991的博客
03-10 9333
问题解决 下面 umi 的两个配置解决了问题。 { publicPath: './', history: { type: 'hash', } } 问题描述 使用umi + react + ant design 搭建React web项目，使用的config.ts 配置如下： import { defineConfig } from 'umi'; import defaultSettings from './defaultSettings'; import proxy fr
DEDECMS首页自动生成静态文件index.html
netuser1937的博客
01-09 4150
DEDECMS首页自动生成静态文件index.html
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
打包后的dist文件夹是存放所有打包生成的静态资源的地方，包括index.html、JavaScript文件、CSS文件等。 在打包完成后，我们通常需要将dist文件夹中的内容部署到服务器上，但在部署之前，往往需要在本地环境中测试...
angular-cli ng build 打包完成后 打开文件显示空白
weixin_30819085的博客
06-19 916
将index.html 里面的<base href="/"> 改为<base href="./"> 前面加一个 点 就好了，然后再次打包。 不能直接在本地打开，需要模拟服务器环境打开才可以。 可以拖入HBuilder中 打开打包好后的index.html 然后Ctrl+R 转载于:https://www.cnblogs.com/MainActivity/p/...
Npm run build 打包之后打开dist的index.html报静态资源路径错误
qq_32741973的博客
04-09 997
解决方法一.修改config下的assetsPublicPath的'/'为'./'，重新npm run build,再打开dist的index.html 解决方法二：安装一个http-server在本地开启一个本地的服务器，assetsPublicPath的'/'不用加. ...
前端打包生成的dist文件，index.html直接访问
m0_52539506的博客
09-26 3145
前端打包dist文件，直接访问index.html
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
热门推荐
青春木鱼的博客
07-14 2万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
解决vue打包项目后点击dist文件夹中的index.html网页显示一片空白的问题
qq_44475148的博客
11-19 8703
问题描述： vue项目完成后，用npm run build d打包项目后，出现dist文件夹，点击dist文件夹下的index.html页面出现一片空白。 原因分析： vue-cli3.0及以上版本没有configwe 解决方案： 提示：这里填写该问题的具体解决方案： 例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandl
解决vue3打包之后dist文件夹下index.html不显示的问题
qq_45079530的博客
03-02 4307
1、当我用vue3的脚手架生成一个项目，npm run build打包成功之后，结果却显示出了空白页，按f12检查了一下报错，如图所示： 说是我的js文件和css等文件的路径找不到，网上搜索发现是因为vue-cli3简洁了许多，没有了配置文件，默认公共路径是'/'，所以需要自己创建配置文件去更改路径，配置文件只能在项目的根目录下创建（跟src文件平级），并且文件的名字只能是vue.config.js，然后在这个文件里面加上下面的代码即可： module.exports = { public
React 打包部署服务器踩坑记录
小小云麓的博客
01-31 4887
公司项目前端开发用的是React,所以自己一直在本地测试开发，最后终于开始打包上线了 项目中用axios封装了工具类来请求，自动匹配开发和测试api if (process.env.NODE_ENV === 'development') { axiosIns.defaults.baseURL = '/dapi'; } else if (process.env.NODE_ENV =...
html粘贴绝对路径报错,npm run build生成路径问题
weixin_42131861的博客
06-18 539
vue项目中可以使用npm run build 命令生成静态文件夹dist，开发者可以直接点击dist文件夹下面的index.html问价来访问自己的项目，但是用vue-cli生成的项目，当运行npm run build 时，生成的index.html中的文件是绝对路径(问题一)直接打开index.html之后就会报错：因为vue-cli的默认配置中, assetsPublicPath是用绝对目录...
npm run build打包的index.html打开白屏
weixin_46394325的博客
03-20 435
打包文件不显示
Vue 解决 npm run build 后 index.html 不能直接运行的问题
fukami666的博客
04-20 3468
Vue 解决 npm run build 后 index.html 不能直接运行的问题一、开发环境二、遇到的问题1.在浏览器中打开 dist 目录下的 index.html2.开发工具中打开 index.html解决方案1.简单粗暴的办法2.一劳永逸的办法总结1.找到配置文件2.添加配置项目3.在【package.json】中配置4.大功告成！ 一、开发环境 Vue版本2.6.11 （想看解决方案的同学可以直接跳到总结） "scripts": { "serve": "vue-cli-service
项目里面没有npm run build
03-12
<think>好的，我现在需要解决用户的问题：如何在项目中添加或修复npm run build脚本。根据用户提供的引用内容，我需要结合这些信息来给出正确的步骤。 首先，用户提到当运行npm run build时出现“missing script: build”错误，引用[2]指出这是因为package.json中的scripts部分缺少build脚本。所以第一步应该是检查package.json文件，确认是否存在build脚本。如果不存在，就需要手动添加。 接下来，引用[1]说明npm run build通常会调用Webpack等构建工具。因此，添加build脚本时需要指定正确的构建命令。比如，可能是"build": "webpack --config webpack.config.js"，但具体命令取决于项目使用的构建工具和配置文件。 然后，引用[3]提到在config/index.js中设置路径，这可能是指某些项目（如Vue CLI）的配置方式。但如果是普通的Webpack项目，通常是在webpack.config.js里配置输出路径。不过，用户当前的问题是关于缺少build脚本，所以重点应放在修复package.json上。 还需要考虑用户的项目类型。如果是使用Create React App或Vue CLI，默认应该已经有build脚本。但如果项目是手动配置的，可能需要用户自己添加。此外，确保项目已安装了相关依赖，比如webpack、webpack-cli，否则即使有build脚本，运行时会报错模块缺失。 总结步骤应该是：1. 检查package.json的scripts部分，添加build脚本；2. 确认构建命令正确；3. 安装必要的依赖；4. 测试运行npm run build。同时，提醒用户检查配置文件路径是否正确，如引用[3]提到的config/index.js中的设置，避免打包后文件位置不符合预期。 另外，可能还需要检查项目的根目录下是否有正确的Webpack配置文件，因为如果脚本指向的配置文件不存在，也会导致构建失败。这时候需要用户根据项目实际情况创建或调整配置文件。 最后，确保用户理解不同项目结构的差异，比如Vue项目可能使用vue-cli-service build，而纯Webpack项目则直接调用webpack命令。因此，需要根据具体情况调整build脚本的内容。</think>要在项目中添加或修复`npm run build`脚本，请按照以下步骤操作： ### 1. 检查package.json配置 - 打开项目根目录的`package.json`文件 - 在`scripts`字段中添加build指令（若不存在）： ```json { "scripts": { "build": "webpack --config webpack.config.js" // 标准Webpack项目 // 或 "build": "vue-cli-service build" // Vue项目 // 或 "build": "react-scripts build" // Create React App } } ``` *注意：具体命令取决于项目框架[^1][^2]* ### 2. 安装必要依赖 在终端执行（根据项目类型选择）： ```bash # Webpack项目 npm install webpack webpack-cli --save-dev # Vue项目 npm install @vue/cli-service --save # React项目 npm install react-scripts --save ``` ### 3. 验证配置文件 确保存在对应的构建配置文件： - Webpack项目需要`webpack.config.js` - Vue项目需要`vue.config.js`（可选） - React项目内置配置无需额外文件 ### 4. 自定义输出路径（可选） 如需要修改打包路径，参考引用[3]： ```js // Vue项目config/index.js module.exports = { build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist') } } ``` ### 5. 执行构建命令 ```bash npm run build ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值