vue打包后，index.html是空白的怎么办？

已于 2022-07-29 21:57:54 修改
阅读量528 收藏
点赞数
文章标签： 前端
于 2022-07-29 21:55:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50659936/article/details/126064568
版权


（1）：找到配置文件 vue.config.js，插入红框代码⬇️⬇️⬇️：

e2f9adcc8a5d478da1773693201f38fd.jpg

（2）：找到路由配置文件（router/index.js），

histroy 改成 hash ⬇️⬇️⬇️：

466f9956b3f24c1ca38379737b3f2e1a.jpg

 结束！直接 npm run build 吧！

 

•商在在
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决vue 打包发布去#和页面空白的问题
10-18
总结来说，解决Vue打包发布时的`#`符号和页面空白问题，主要涉及以下几个步骤： 1. 在Vue Router配置中，将模式设置为`history`并设置正确的`base`。 2. 更新Webpack的`assetsPublicPath`为服务器上的应用路径。 3. ...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
10-16
主要介绍了解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决Vue打包后单机index.html页面无内容(比如用的是本地资源)
最新发布
zgxljqxm的博客
05-22 456
看网络上这种解决方法需要付费。我的项目没有使用webpack 和vite工具进行打包 纯原始打包。
最快捷的两种方案彻底解决：vue打包后dist目录下的index.html网页显示空白的问题
在写作的路上持续输出。
03-27 1万+
📢：解决vue 打包后dist 目录下index.html 页面空白的问题。两种方案快速解决......
vue index.html显示空白,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
weixin_36243860的博客
06-16 863
2019独角兽企业重金招聘Python工程师标准>>> Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。问题一：我在打包完成后，打开index.html文件发现地址并没有携带路由。 这样的话页面就是空白了，因为...
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
热门推荐
青春木鱼的博客
07-14 1万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
vue项目打包后打开页面空白解决办法
08-27
要解决 Vue 项目打包后打开页面为空白的问题，需要检查 config 文件中的 index.js 文件，确保 build 模块导出的路径正确，并且检查路由配置文件中的模式设置。如果模式设置为 history 模式，需要在服务端添加一个...
vue打包后，index.html打开空白
aGreetSmile的博客
12-18 183
vue2.0中 在config文件夹找到index.js 在index.js文件找到build进行修改 vue3.0中 创建vue.config.js文件 添加配置 router.js路由必须为hash模式 mode: 'hash'
vue项目打包访问index.html页面出现空白
muzidigbig的博客
01-04 8615
错误现象： 1.主要的问题就是路径问题 因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。 只要修改config文件夹里的index.js里的assetsPublicPath的值； config/index.js assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级...
vue打包完index.html空白,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题-20210315083204.pdf-原创力文档...
weixin_34547317的博客
06-28 300
解解决决Vue项项目目打打包包后后打打开开index.html页页面面显显示示空空白白以以及及图图片片路路径径错错误误的的问问题题V ue项目运行npm run build后会生成一 dist文件夹，我们一般都是把这 文件夹部署到服务器上。dist文件夹里边有一 static文件和一 index .html页面，这 index就是最后单页面的最终文件。问问题题一一：：我在打包完成后，打开index...
解决：vue打包后在本地运行dist文件夹中index.html出现空白页面
m0_55333789的博客
01-09 960
解决：vue打包后在本地运行dist文件夹中index.html出现空白页面
vue项目打包后打开index.html页面显示空白问题
Arlisol的博客
02-24 3186
博主终于完成了自己的demo项目，到了打包这一步。通过npm run build命令打包后会在项目文件中生成一个名为dist的文件夹，里面是打包后的项目文件和资源。但是，打开index.html文件后却显示一片空白，打开控制台还会发现有报错，找不到页面路径。 问题原因： config文件夹下index.js中的build命令的配置有一个属性叫assetsPublicPath，默认为 assets...
如何解决vue2.0 打包之后 打开index.html出现空白页
qq_15038747的博客
03-03 993
如何解决vue2.0 打包之后 打开index.html出现空白页 如何解决vue2.0 打包之后 打开index.html出现空白页 1.打包之前修改三个文件 1.1.第一步，找到build文件，在webpack.prod.conf.js 第25行左右 有一个对象为 output,在这里面增加一行代码 publicPath:'./' output: { ...
解决vue项目打包后打开index.html一片空白
sinat_36141399的博客
11-30 1万+
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 ...
vue.config 配置
tp27933的博客
09-25 853
這裡記錄下 練習vue時用到的config const path = require('path') function resolve (dir) { return path.join(__dirname, '.', dir) } module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '' : '/', outputDir: process.env.NODE_ENV === 'production' ?
.vue文件_vue项目打包后index.html文件打开空白解决方法
weixin_39922151的博客
11-25 1198
build打包vue项目遇到的问题，如下：1、npm run build打包项目之后，生成的dist文件里面有被压缩后的static文件跟index.html，直接打开index.html页面是空白的，还会报几个错，找不到页面路径。原因：找到config文件下index.js，会发现build下的 assetsPublicPath：' / ' 默认为根目录，而index.html和sta...
vue-cli3.0(@vue/cli)设置网站标题时找不到index.html问题解决
fwhdzh的博客
04-21 8280
需求 使用Vue做课程设计，需要更改一下网站的题目和图标。 默认效果 想要实现的效果 背景颜色不同是由于上面的浏览器开了暗色模式。 问题 根据在网上查找，很容易得知对于标题只需要很简单的修改index.html里的一行代码即可。对于图标，除了需要修改index.html的代码，还需要在app.vue中添加几行代码。 但是index.html在哪里？网上的所有相关博客都说“在项目根目录中找到i...
vue打包后index.html空白
05-19
如果 Vue.js 应用程序在打包后的 `index.html` 文件中没有任何内容，则可能是以下几个原因之一： 1. 检查 `publicPath` 配置项是否正确：在 `vue.config.js` 或 `webpack.config.js` 文件中设置了错误的 `publicPath` 值会导致 `index.html` 文件无法正确加载应用程序的资源文件。确保 `publicPath` 的值正确设置为你的站点的根路径。 2. 确保构建过程没有出现错误：检查命令行或终端输出，看是否有任何错误消息。如果有，请修复错误并重新运行构建命令。 3. 检查是否正确引入资源文件：在 `index.html` 文件中，确保正确引入了应用程序的所有资源文件（例如 `main.js`、`app.js`、`app.css` 等）。在浏览器的开发者工具中查看网络面板，检查是否有任何资源文件加载失败或 404 错误。 4. 检查是否正确设置应用程序的根元素：在 `index.html` 文件中，确保将 Vue.js 应用程序的根元素正确设置为 `id` 为 `app` 的元素。例如： ```html <div id="app"></div> ``` 如果以上方法都无法解决问题，请尝试使用浏览器的开发者工具调试应用程序以获取更多信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值