解决老版本webpack打包后没有index.html_放到服务器上Nginx没办法部署/部署后显示403Forbidden/index.html空白页

于 2023-12-08 15:41:28 发布
阅读量695 收藏 8
点赞数 9
文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53318684/article/details/134879759
版权

一. 问题简介

        之前在github上找了一个比较老的聊天框的项目，其中使用的webpack版本太老了，导致即使在webpack.config.js中导入html-webpack-plugin插件，最后打包的时候还是没有index.html，或者说即使有index.html也最后放到服务器上也是空白页，关键的是它也不报错，就是没有html文件。

        上面这个是没用插件的时候打包出来的dist里面的玩意儿，没有html

        这个是装了html-webpack-plugin后，确实有html了，但是放在服务器上，Nginx代理出来是空白页。

二. 解决思路

        

        这个是我的原来老版本的依赖图，可以看到webpack版本实在太老了，我但是用了插件没有打包成功以后，去了那个插件的官网，发现插件只支持webpack3/4了。

        在网上搜了好久都没有找到跟我情况一模一样的，于是乎只能靠自己了

        

        可以看到这里build也是用的webpack，突然想到webpack其实没有那么重要，只是充当一个指挥的作用而已，对我的vue项目根本不存在损失

        于是果断打开命令行 vue create xxx_trans，选择跟原项目相同的vue2，关闭那个检查语法的玩意儿，然后我们发现新项目中的build是用的vue-cli

        然后，直接把老项目中的src文件夹覆盖到新项目中就成功了90%了！

        最后你看着差哪些必要的依赖再装一遍就齐活了！

        有相同问题的直接留言或者私信，我帮你瞅瞅

C4Chuang
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack不生成index.html
likunpeng6656201的博客
10-22 1622
没有导出你的最后2个插件，并且没有指定html文件名dist，因为HtmlWebpackPlugin应该生成相对于path，下面是固定配置： var path = require('path') var webpack = require('webpack') var HtmlWebpackPlugin = require('html-webpack-plugin'); ...
webpack打包后没有html文件,webpack打包后dist目录下没有images文件夹？
weixin_33327330的博客
06-16 793
Vision"webpack": "^3.10.0","webpack-dev-server": "^2.9.5"文件结构(打包前)：w用能境战求道，重件开又是正易里是了些之框ebpack.config.j求圈分件圈浏第用代是水刚道。的它还sconst path = require('path');const webpack = require('webpack');const HtmlWebpa...
vue打包不生成html,vue本地打包build之后dist文件下的index.html不显示内容报错Failed to load resource...
weixin_39772420的博客
06-07 1115
【vue-cli踩坑】Failed to load resource: net::ERR_FILE_NOT_FOUND或者build之后dist文件下的index.html不显示内容这里会介绍 vue-cil@2 和 vue-cil@3 两种方式创建项目的解决方案场景通过vue-cli创建的项目npm run dev 运行开发环境可以看到效果，但是 npm run bulid 之后，生成的dis...
nginx负载均衡反向代理MySQL配置
mafei138119的博客
03-18 341
user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_fo
Vue3+Webpack(内嵌)打包HTML的那些坑（已解决）
legendsASD的博客
06-02 529
初始化项目后，可以看到默认给出了三个脚本：},此时好像直接运行如下代码之一就能打包：打包之后的项目结构如下：-dist--css--js直接访问index.html你会发现一片空白！打包失败！
vue在index.html中引入静态文件不生效问题及解决方法
10-17
如果你自定义了静态资源目录，比如命名为`public`，并且没有正确地配置Vue CLI的构建设置，那么Vue CLI在打包时不会找到并复制这些资源到输出目录。 **解决办法：** 需要修改三个配置文件来确保Vue CLI识别和处理...
vue 打包后的文件部署到express服务器上的方法
08-29
vue是目前最流行的前端框架，今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发，下面通过本文给大家分享vue 打包后的文件部署到express服务器上的方法，感兴趣的朋友一起看看吧
Vue项目webpack打包部署到服务器的实例详解
08-29
主要介绍了Vue项目webpack打包部署到服务器的实例详解的相关资料,需要的朋友可以参考下
Webpack打包css后z-index被重新计算的解决方法
08-30
总的来说，解决 Webpack 打包 CSS 后 z-index 重计算的问题需要理解 CSS 的堆叠上下文和 webpack 的打包机制，通过调整配置和优化代码组织，可以有效地防止这类问题的发生。同时，保持代码的整洁和模块化，以及对...
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
11-19
更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置： if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, ...补充知识：webpack打包运行vue项目后找不到.ttf及.w
vue-cli，webpack使用npm run build打包完打开index.html页面不显示的问题处理方式
爱的叹息的专栏
11-15 1017
【代码】vue-cli，webpack使用npm run build打包完打开index.html页面不显示的问题处理方式。
Webpack使用plugin插件自动在打包目录生成html文件
最新发布
XunLin233的博客
09-22 440
我们使用html-webpack-plugin插件可以自动在打包代码目录生成html文件。
webpack index.html空白,webpack4.x使用踩坑
weixin_39824033的博客
06-28 197
webpack.config.js简单配置:1.module.exports={entry:{a:'./src/index.js'},output:{path:__dirname+'/dist',filename:'bundel.js'}}2.const path=require('path');module.exports={entry:{a:'./src/index.js'},output:{...
解决webpack打包后，直接打开index.html为空白页面的问题
weixin_44151377的博客
08-30 2692
解决webpack打包后，直接打开index.html为空白页面的问题 使用webpack打包后会生成dist文件，直接打开dist下的html为空白 1、原因是请求js文件的路径错误，导致vue组件没有挂载到根目录下 2、解决方法：在配置production环境的文件中，将publicPath设置为"./" 3、再次npm run build进行打包，打开html就会显示相应内容 各位大佬，有更好的解决方法欢迎分享，谢谢~ ...
html模板文件打开空白,Webpack打包index打开空白
weixin_32279911的博客
06-19 325
不做配置的话，Vue提供的webpack模板 npm run build打包之后打开dist/index.html是空白的打开浏览器调试，文件未找到查看Element路径是根目录下，所以并没有相应资源解决方法：config/index.js中的module.exports.build.assetsPublicPath由根目录/改为相对路径./build: {// PathsassetsRoot: ...
electron+vue+better-sqlite3构建报错：Cannot read property ‘indexOf‘ of undefined
L5Y777的博客
07-04 2566
最近做一个软件，用better-sqlite3存储数据用vue3做前端，用IPC进程间通信模拟ajax请求实现前后端分离。后端简单模仿MVC框架写了一遍，后端在node环境下测试没有问题，但是打包进electron项目中就出现了问题 原因是使用DBUtils中使用better-sqlite3的new Database方法打开sqlite数据库文件时，调用了bindings库中的getFileName方法。打开bindings.js这个文件找到此方法： 从上面的代码发现，报错中的in.......
打包MavenWeb项目后，war包中没有html文件，导致网页打不开
你若盛开，清风自来。
04-21 528
经过尝试，发现把文件夹。
webpack打包图片资源，图片不显示和index.html，HtmlWebpackPlugin
weixin_45441173的博客
02-25 1059
webpack打包图片资源，图片不显示和index.html，HtmlWebpackPlugin
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、付费专栏及课程。

余额充值