vue-cli4项目打包后，双击index.html页面空白

最新推荐文章于 2022-08-01 10:05:34 发布
最新推荐文章于 2022-08-01 10:05:34 发布
阅读量591 收藏 1
点赞数
文章标签： vue.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Anny1272667988/article/details/121719786
版权

vue-cli4项目打包后，在解压后的dist文件夹里双击双击index.html页面空白，部署到服务器上也有问题

  • 原因：css和js文件路径配置成绝对路径了，意思域名下就是css和js文件，不包含一二级文件
  • 解决方法：把css和js文件配置成相对路径，vue-cli4配置通配的路径keyword为publicPath，并且在vue.config.js文件里配置，如下图：
    解决截图
Beauty-Anny
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-cli3项目升级到vue-cli4 的方法总结
10-15
主要介绍了vue-cli3项目升级到vue-cli4 的方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
今天小编就为大家分享一篇解决vue-cli项目webpack打包后iconfont文件路径的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目打包后打开页面空白解决办法
01-21
网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。 module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: p
vue项目打包后页面出现空白
ZYX10077的博客
12-13 300
vue-cli3的话要稍微麻烦些，因为vue-cli3简洁了许多，没有了配置文件，所以需要自己创建，只能在项目的根目录下创建，并且文件的名字只能是vue.config.js，然后在这个文件里面加上下面的代码即可 module.exports = { assetsDir: 'static', parallel: false, publicPath: './', } 然后在控制台yarn build 就可以了会生成一个文件dist ...
【Vue-cli】打包后页面空白
joanmelon的博客
11-08 253
Hi，我是宾果的救星~希望能够给你带来思路解决难题~
vue 打包后页面空白问题
1234Wu--Blog
02-19 1413
1.可能是打包的路径有问题 你可以打开打包后的index.html检查一下css,js的路径是否正确； 路径不正确，你就需要在vue.config.js中修改这个属性：（vue.config.js不知道怎么配置看这里：vue.config.js配置） publicPath: "./", // 根域上下文目录 2.router.js配置的问题 Vue-router 中有hash模式和histor...
php打开vue项目空白,vue打包后页面显示空白但是不报错
weixin_36233098的博客
03-24 278
【JavaScript吉光片羽】遭遇IE8最初对做兼容性的认知只停留在UI层面,但其实UI层面都还好,因为毕竟你可以直接看得见现象,更为重要的是在JavaScript层面,因为这个部分涉及到功能性,前者最多是体验性的问题.下面扯一下这几天遇到 ...使用CodeFirst创建并更新数据库本文主要介绍如何使用CodeFirst模式来新建并更新数据库 在使用Entity Framwork的三种方式(M...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
vue-cli3项目打包后自动化部署到服务器的方法
10-14
主要介绍了vue-cli3项目打包后自动化部署到服务器的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue下路由History模式打包后页面空白的解决方法
08-27
主要介绍了Vue下路由History模式打包后页面空白，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决vue 打包发布去#和页面空白的问题
12-12
1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../yiTownWebApp/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../yiTownWebApp'), assetsSubDirectory: 'static', assetsPublicPath: '/yiTownWebApp/',//这个地方使用绝对路径很重要 /** * Source Map
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
今天小编就为大家分享一篇解决vue-cli项目打包出现空白页和路径错误的问题。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
vue项目打包后，打开页面为空白的解决办法
热门推荐
m0_51060602的博客
03-10 1万+
vue项目打包上线后，出现空白页面的解决办法
Vue项目打包后打开是空白怎么办
weixin_51295096的博客
10-04 315
不一定可以解决你的问题，但不妨一试 项目打包以后网页一片空白，百度、bing了好久都没找到解决方案。最终终于找到了… 现在是2021年10月4日，你不需要像网上的教程说的那样修改vue.config.js中的publicPath, 更不需要添加什么 assetsDir，你只需要注释一行代码。。。。 是的，这行代码怎么突然不香了呢。。。。。你怎么能辜负我对你的喜爱呢 55555 啊，我逝去的几个小时时光啊！ ...
vue 打包页面空白的问题
no pains,no gains
11-17 205
解决办法： 1.配置文件中的publicPath改为"./" publicPath: "./", 2.如果配置文件中的publicPath已经是"./"，打包出来的html还是空白，那么修改router的index.js文件中的mode值，由history改为hash
Vue在打包项目时显示空白页问题和一些解决思路
benlalagang的博客
08-01 7173
Vue在打包项目时显示空白页问题和一些解决思路、1.整体资源路径、2.路由模式、3.本地服务器的改变
如何启动Vue-cli项目中的HelloWorld.vue
最新发布
06-01
可以按照以下步骤启动Vue-cli项目中的HelloWorld.vue： 1. 打开命令行工具，进入到Vue-cli项目的根目录。 2. 输入命令 `npm run serve`，启动项目的开发服务器。 3. 在浏览器中输入 `http://localhost:8080/`，访问项目的首页。 4. 在Vue-cli项目的 `src/components/` 目录中找到 `HelloWorld.vue` 组件文件。 5. 在 `App.vue` 中引入 `HelloWorld.vue` 组件，并在 `template` 中使用该组件。 如果以上操作都正确无误，就可以在浏览器中看到 `HelloWorld.vue` 组件的内容了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值