webpack代码部署index.html无内容显示

最新推荐文章于 2025-05-11 22:08:26 发布

白板儿

最新推荐文章于 2025-05-11 22:08:26 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/github_35948440/article/details/72133135

本文介绍了解决通过file://访问index.html时遇到的问题，并提供了一个简单的方法来修正这一问题，即通过修改config/index.js文件中的assetsPublicPath参数。

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

Tip: built files are meant to be served over an HTTP server.

Opening index.html over file:// won't work.

解决：更改config/index.js 中的参数

assetsPublicPath:'./',

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

白板儿

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决新版阿里weex框架创建vue项目后打开http://localhost:8080/index.html空白

xjj19920608的博客

05-12

2万+

阿里的weex框架在4月更新了版本，根据官方的教程，使用weex-toolkit v-1.01之后的版本创建vue项目，并参考教程，搭建了整个项目，然后运行。http://weex.apache.org/cn/guide/set-up-env.html 整个项目的目录如下：但是当执行npm run serve之后，打开浏览器http://localhost:8080/index.html，出现了手

index.html

06-03

标签淘宝实战项目网页开发具有很多特效CSS计算机计算机

2 条评论您还未登录，请先登录后发表或查看评论

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

weixin_33994444的博客

06-04

595

2019独角兽企业重金招聘Python工程师标准>>> ...

Webpack打包vue项目后发现index.html为空白

最新发布

EdgeWorld的博客

05-11

335

之后我发现其中也有history出现，但不能像上面那样直接修改history为hash，而是需要注意到'vue-router'中还有一个函数是‘createWebHashHistory’，将原来代码的‘createWebHistory’函数替换掉，得到。此时再重新运行npm run build，得到的index.html不再是空白。今天在用Webpack打包vue3项目后，发现index.html一直是空白，于是我在网上找到该方法：修改相对路径 “/” -> “./”，

web.xml与index.html

weixin_34257076的博客

04-07

803

2019独角兽企业重金招聘Python工程师标准>>> ...

10- webpack 自动生成 index.html

ZWQ0325的博客

07-21

2370

index.html 文件是手动创建编辑的，js 文件是 webpack 自动生成的。当js文件名称改变时还需要手动修改 index.html 文件，随着应用程序增长， index.html 文件进行管理，一切就会变得困难起来。然而，可以通过插件 HtmlWebpackPlugin ，自动完成这个任务。一、安装插件 npm install --save-dev html-webpack-plug...

webpack+vue模板.rar

09-17

4. `index.html`：这是项目的入口 HTML 文件，通常用于加载打包后的 JavaScript 应用程序。在 Vue.js 项目中，`<div id="app"></div>` 是 Vue 实例挂载的根元素。 5. `启动.bat`：这是一个批处理文件，通常用于运行...

webpack 官方中文文档.pdf

01-26

### webpack 官方中文文档知识点总结 #### 一、webpack简介 webpack是一个现代JavaScript应用...总之，webpack是一个强大且灵活的工具，通过理解其核心概念和使用方法，可以极大地提升前端项目的构建效率和部署体验。

一个链接API，用来生成和简化Webpack配置的修改.zip

02-28

Webpack 是一款强大的模块打包工具，它能够将 JavaScript 应用程序中的各种资源（如 JavaScript、CSS、图片等）转换和打包成适合生产环境部署的静态资源。在 Webpack 的配置过程中，随着项目复杂性的增加，配置文件...

webpack4 教程.docx

10-22

Webpack 4 是一款强大的模块打包工具，用于将各种前端资源如 JavaScript、CSS、图片等整合成一个或多个可部署的静态资源。以下是一份详细的基于 Webpack 4 的搭建教程，涵盖从基础设置到进阶配置。 ### 1. 初始化...

浅谈webpack4.x 入门(一篇足矣)

12-09

Webpack 4.x 是一款强大的模块打包工具，它能够将 JavaScript、CSS、图片等资源转换、合并、优化并打包成一个或多个可部署的文件。在Webpack 4版本中，一些插件和配置方法有所变动，使得新手入门时可能遇到一些挑战...

新增路由 vue html,VUE 项目刷新路由指向index.html

weixin_36331580的博客

06-03

1117

背景描述：VUE 项目经过 npm run bulid 生成静态文件上传到服务器后，当我们切换路由并刷新页面，nginx 服务器会报 502 或者 404 错误。原因分析：我猜测是因为在 VUE 项目中，路由是利用H5的 history ，看起来页面 url 发生了变化，其实根本就在同一个页面。简而言之，除了根路由之外的路由并不是有效的 url，所以直接刷新页面并不能 get 到对应的内容。解决方...

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-cli3.0以上打包后index.html打开是空白的不显示解决方案

weixin_41884808的博客

07-16

2468

** vue-cli3.0以上打包后index.html打开是空白的不显示解决方案 ** 昨天，写了一个简单的项目官网，本来挺简单的一个项目，结果打包的时候出问题了。项目是同事搭建的，她是Vue3.0以上的版本，而我的是2.9的版本。我们打包都不成功。 #2.0版本在2.X版本以前，项目都是有个config文件夹的，在index.js里修改build下面修改下静态资源的路径，assetsPublicPath加个点。如图 ##3.0以上那么3.0以上怎么办，也简单，分两步走 1.在router的inde

vue项目打包之后index.html页面没有显示内容

学习记录

09-10

6293

Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won 解决：更改config/index.js 中的参数 assetsPublicPath:'./',

如何将WEB网页打包为APP？

热门推荐

刘泽华的博客

05-16

5万+

首先我们需要用到HBuilder。什么是HBuilder？ HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提...

webpack对html文件的处理

喵大嗷的博客

03-30

5170

为什么去处理html文件我们所有的方法都打包到了dist的文件夹下面，而我们的html是在自己定义的文件夹下面，如果自己手动再去一个一个src引入这些dist文件夹下的js，那么也有些太不靠谱了所以解决办法是: 使用webpack插件:HtmlWebpackPlugin 第一步：下载 npm install --save-dev extract-text-webpack-pl...

webpack.config.js,webpack.dev.js,webpack.prud.js,

01-15

### Webpack 不同环境配置文件的作用与区别 #### 通用配置文件 `webpack.config.js` `webpack.config.js` 是 Webpack 的默认配置文件，适用于所有环境下的打包需求。此文件定义了项目的入口文件、输出路径、模块解析规则以及所使用的插件等基本设置[^2]。对于未采用高级构建工具（如 Vue CLI）管理的项目而言，这是必不可少的一部分，因为其直接决定了整个应用如何被打包处理。 #### 开发环境专用配置 `webpack.dev.js` 开发阶段更注重效率与调试便利性，在这个过程中通常希望实现热更新(HMR)，即修改源码后浏览器能够自动刷新并仅重新编译受影响的部分；同时为了便于排查问题还需要保留完整的错误堆栈信息而不是混淆后的代码片段。因此，专门针对开发者模式定制化的 `webpack.dev.js` 应运而生： - 启用了 source map 功能以便追踪原始 JavaScript 错误位置； - 使用 webpack-dev-server 提供本地服务器支持即时预览网页效果，并开启 live reloading 特性让页面随代码变动同步更新显示内容； - 取消压缩资源以加快增量编译速度，提高迭代测试效率。 ```javascript // 示例：webpack.dev.js 配置部分选项 module.exports = { mode: 'development', devtool: 'inline-source-map', // 方便调试 plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html' }), ... ], }; ``` #### 生产环境优化配置 `webpack.prod.js` 当准备部署至线上生产环境中时，则需考虑性能最优化方面的要求——减小最终产物体积从而提升加载速度成为首要目标之一。此时引入特定于生产的配置文件 `webpack.prod.js` 就显得尤为重要了: - 对 CSS/JS 资源执行最小化(minify)操作去除不必要的空白字符和注释来减少传输量； - 实施 Tree Shaking 技术剔除无用代码分支降低整体大小； - 利用缓存策略通过哈希值标记静态资产确保只下载最新变更项而非全部重传； - 设置长期有效期限(max-age)使浏览器可以长时间内重复利用已获取过的公共资源而不必再次请求网络。 ```javascript const TerserPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: 'production', optimization:{ minimize:true, minimizer:[new TerserPlugin()], splitChunks:{chunks:'all'} }, module:{ rules:[ {test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader']}, ... ] } } ```