解决webpack打包后，直接打开index.html为空白页面的问题

最新推荐文章于 2023-10-31 12:30:35 发布
最新推荐文章于 2023-10-31 12:30:35 发布
阅读量2.6k 收藏 6
点赞数
文章标签： html vue.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44151377/article/details/119993066
版权

使用webpack打包后会生成dist文件，直接打开dist下的html为空白


1、原因是请求js文件的路径错误，导致vue组件没有挂载到根目录下
在这里插入图片描述

2、解决方法：在配置production环境的文件中，将publicPath设置为"./"
在这里插入图片描述
3、再次npm run build进行打包，打开html就会显示相应内容
在这里插入图片描述
各位大佬，有更好的解决方法欢迎分享，谢谢~

圆头�
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack打包后直接访问页面图片路径错误的解决方法
08-30
主要给大家介绍了在webpack打包后直接访问页面图片路径错误的解决方法，文中介绍的非常详细，对遇到这个问题的朋友们具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
vue+webpack 打包文件 404 页面空白的解决方法
11-30
最近用vue-cli+vue-router+webpack建立项目，其中的遇到的三个问题，整理如下： vue-cli+ webpack 建立的项目，cnpm run build 打包项目之后，需要放在http服务器上才可以运行， 例如 ：nginx vue单页面的启动页面是index.html,路由的路径实际是不存在的，所以会出现刷新页面404的问题，需要设置所有找不到的路径直接映射到index.html 1 刷新页面404 配置启动文件的index页面的路径root: D:/workPlace/mex-adx-web/mex-adx-web/dist 2 二级页面刷新报错： 打包的项目静态
webpack dll打包重复问题优化的解决
10-17
在使用dll plugin过程中出现的一个包依赖问题，这个问题导致打出来的包会包含重复的代码。这篇文章主要介绍了webpack dll打包重复问题优化的解决，感兴趣的小伙伴们可以参考一下
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
今天小编就为大家分享一篇解决vue-cli项目webpack打包后iconfont文件路径的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
技术共享，共同进步！
04-11 2174
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue webpack打包后显示的网页是空白
pon的博客
04-01 3749
使用了webpack开发vue项目，在项目开发完成后，使用命令：npm run build对项目进行打包，打包结果如下： 但是将dist文件发布后，打开发现浏览器页面是空白的： 原因： 这个是因为webpack打包的时候引入js时使用的是绝对路径导致的。 修改webpack打包文件中的配置： 1.在webpack.prod.conf.js中增加publicPath:’./’ ； 2.util.......
webpack打包后的文件夹是空的_vue+webpack 打包文件 404 页面空白的解决方法
weixin_39677419的博客
12-19 154
最近用vue-cli+vue-router+webpack建立项目，其中的遇到的三个问题，整理如下：vue-cli+ webpack 建立的项目，cnpm run build 打包项目之后，需要放在http服务器上才可以运行，例如 ：nginxvue单页面的启动页面是index.html,路由的路径实际是不存在的，所以会出现刷新页面404的问题，需要设置所有找不到的路径直接映射到index.htm...
解决vue 项目使用webpack打包后，直接打开dist文件夹下的index.html页面空白的问题
sinat_41501316的博客
07-09 5376
问题描述 vue项目完成后，输入npm run build命令，会生成dist文件，本地打开dist/index.html，一般页面为空，或者报错找不到css和js文件，则需要更改一些路径参数，改成相对当前目录，然后再次运行npm run build 就可以在本地打开index.html。 解决办法 修改1：将config/index.js文件的assetsPublicPath: ‘/’; 改为assetsPublicPath: ‘./’; 修改2：将build/webpack.base.confg..
webpack打包页面空白的解决方法
04-24 874
转载于:https://www.cnblogs.com/thankyouGod/p/8926776.html
VUE用webpack打包上线，页面出现空白，各种路径出错（每天都记录一个知识点）
vuex的学习笔记
04-20 400
**第一：懵逼 还是懵逼 只能怪自己webpack学的不好，看来要重头好好学习一下webpack了 ** 解决：找到 config > index.js build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dir...
【vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud】
u012632105的博客
02-17 1063
vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud问答
vue.config.js配置configureWebpack的optimization splitChunks页面空白
寬真
03-14 682
确实通过这种方式解决：原因可能是这个：
vue项目页面空白的几个原因及解决办法
热门推荐
xin123____的博客
03-11 4万+
会出现vue项目页面空白，通常问题是在于路由上，可能是以下几种原因： 1.路由重复。 如果配置了两个路由是重复的，比如配置了两个【path: ‘/’】，那么访问就会看到空白页面，这时候改下重复的路由配置即可。 2.路由没有配置。 如果没有配置路由，那么访问的页面也可能是空白页，比如访问/yanggb，但是路由里却没有配置，这时候配置上丢失的路由配置即可。 3.路由配置指向页面为空白页。 这种情况就比较玄乎了，配置了指向的页面什么都没有，展示自然也是空白页。 总结 当然可能还会有别的原因导致vue项目出现空白
webpack打包优化js大小
u010690694的博客
01-27 1294
本文章仅提供解决问题的一个方向和遇到的坑更多具体的还需要自身不断去摸索. 文章目录前言一、JS拆分二、按需加载tree shaking总结 前言 自己搭建了一个webpack+react+typescript打包的脚手架,使用antd来实现UI,build完后出现了一行WARNING WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit
使用webpack 4.39.3打包的项目在本地打开是空白
qwervuhh的博客
12-22 353
解决方案 在根目录下创建一个server.js的文件， 写入代码， 然后在cmd中运行文件 最后直接在浏览器上打开 localhost:8888 就可以了
vue使用webPack打包，显示空白
ooohana_的博客
06-12 336
config文件夹里面index.js文件 把build里面的assetsPublicPath属性改成'./'
vue 使用 webpack 打包上线后页面空白，页面报错或者资源加载不到
xiao_yu_liu的博客
09-20 3564
webpack publicPath 文档 vue router base 属性 文档 1、webpack的原因 在webpack 打包过程中，有一个配置属性，它允许您指定应用程序中所有资产的基本路径。 如果不配置这个属性，页面打包后，所有资源的加载 URl ，是默认的当前的一个路径， 但是当你放到服务器上的时候，你从浏览器请求，这个时候请求的 url 上可能会带一些路径 这个时候。...
新员工webpack打包后上传服务器页面空白
最新发布
前端程序员、项目经理、人工智能博主
10-31 360
某天同事小白使用了开发vue项目，在项目开发完成后，使用命令：npm run build对项目进行打包后发布服务器页面显示空白排查后发现：webpack打包的时候引入js时使用的是绝对路径导致的。
webpack打包之后index.html页面暴露ip号
07-28
如果在 Webpack 打包后的 `index.html` 页面中暴露了 IP 地址，可能是因为在项目配置中使用了错误的配置或插件。为了修复这个问题，你可以尝试以下几个方法： 1. 使用 HtmlWebpackPlugin 插件：在 Webpack 配置文件中，确保你使用了 HtmlWebpackPlugin 插件，并配置了正确的选项。在 `plugins` 部分中添加以下代码： ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ // 设置生成的 HTML 文件中的标题、模板和文件名等选项 }), ], // ... }; ``` 请确保正确设置了 `title`、`template` 和 `filename` 等选项，以避免暴露 IP 地址。 2. 检查 publicPath 配置：在 Webpack 配置文件中，检查 `output` 部分的 `publicPath` 配置。确保将其设置为合适的值，以避免暴露 IP 地址。例如，将其设置为 `/` 或相对路径。 ```javascript module.exports = { output: { // ... publicPath: '/', }, // ... }; ``` 3. 使用 devServer 配置：如果你正在使用 Webpack Dev Server 进行开发，确保在配置文件中正确设置了 `devServer` 部分。检查是否使用了 `public` 或 `host` 等选项，并将其设置为适当的值。 ```javascript module.exports = { // ... devServer: { // ... public: 'your-domain.com', // or // host: 'your-domain.com', // ... }, // ... }; ``` 确保将 `your-domain.com` 替换为你正确的域名或 IP 地址。 4. 检查其他配置项：检查 Webpack 配置文件中的其他可能影响 `index.html` 页面的配置项，例如 `mode`、`optimization` 等。确保这些配置项不会暴露 IP 地址。 如果尝试了以上方法后问题仍未解决，建议仔细检查你的 Webpack 配置文件和相关依赖，确保没有其他错误导致 IP 地址暴露在生成的 `index.html` 页面中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值