vue2.0打包页面成功后，dist文件夹中index.html页面空白的原因

最新推荐文章于 2023-07-14 09:12:31 发布
最新推荐文章于 2023-07-14 09:12:31 发布
阅读量1.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue项目打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_37699645/article/details/88992097
本文介绍了解决Vue 2.0项目打包后出现index.html页面空白的问题，通过修改config/index.js文件中的'assetsPublicPath'配置项来解决此问题。

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

vue2.0打包页面成功后，dist文件夹中index.html页面空白的原因

因为这个问题看了好多些文章，百试不灵
总结说呢，方法都是对的
这个bug修改的真是尴尬
千万不要像我一样找对了文件改错了位置

第一步
找到config文件下面的index.js

打开后，修改“assetsPublicPath”
切记哦
是build里面的assetsPublicPath
是build里面的assetsPublicPath
是build里面的assetsPublicPath

在这里插入图片描述

修改完后就大功告成啦
希望此文可以帮助到马虎的小伙伴们~

打包 Taro-UI 踩过的坑
lazycat的博客
12-29 2388
最近在处理 taro 小程序的优化问题，通过小程序代码依赖分析，其中最大的就是vendors.js，而vendors.js中最大的要属taro-ui的包了。
vue2 多html项目,webpack4打包vue前端多页面项目
weixin_34520664的博客
06-25 823
之前一直用的脚手架，这次自己搭建webpack前端项目，花费了不少心思，于是做个总结。1.用法项目结构如下：project|- bulid |- public|- css|- js|- page1.html |- page2.html ...|- public/ |- src |- components/|- css/|...
如何解决vue2.0 打包之后 打开index.html出现空白页
qq_15038747的博客
03-03 1185
如何解决vue2.0 打包之后 打开index.html出现空白页 如何解决vue2.0 打包之后 打开index.html出现空白页 1.打包之前修改三个文件 1.1.第一步，找到build文件，在webpack.prod.conf.js 第25行左右 有一个对象为 output,在这里面增加一行代码 publicPath:'./' output: { ...
打包后dist中的index文件为空白
Hailee7的博客
07-07 454
在vue.config.js文件中的module.exports设置 publicPath: ‘./’
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
青春木鱼的博客
07-14 2万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
vue2.0 + webpack 引用bootstrap打包后出现的问题
qq_39513971的博客
01-11 884
vue2.0的项目里如何引用bootstrap？（配置vue环境等步骤在此略过，大家可以去本篇文章学习搭建vue-cli环境预热部分Vue2 + webpack 项目实战（一）环境搭建） 好，下面上货。 1、首先按照上面文章中的内容，新建一个vue工程。 2、命令行找到你创建的工程目录下，使用命令npm install jquery –save-dev 引入jquery。 注：如果想查看np
vue2 在vue.config.js里webpack基本配置项
Noctis99的博客
01-31 924
w
记一次成功把Vue2后台项目改造成Vite2的踩坑经历
yilingsj的博客
06-02 8057
公司后台项目基于@花裤衩大神的vue-element-admin，随着项目功能的不断完善和需求不断增加，项目启动也变的越来越慢。慢到什么程度呢？我i7-10代16G内存的本本跑项目最快也需要近3分钟，实在难以忍受。几经折腾，终于成功改造成了vite。现在跑项目，5秒内即可跑起来，简直不要太爽！此次改造的过程遇到很多问题，现将遇到的问题做下记录，以防后续改造类似项目时继续踩坑。本次要改造的是一个基于vue-element-admin的后台项目。由于项目比较老，所以没有使用到typescript
使用HBuilderX 打包 vue 项目 为 App 的步骤
ZHIYUANfL的博客
05-31 6790
这里，我的项目是vue-cli构建的工程，h5移动端页面。 由于开发成本并没有用安卓或ios原生语言来开发app，而是选择将现有项目直接打包。 下面我会分享一下HBuilderX 打包 vue 项目 为 App 的步骤。希望对有需求的同学提供帮助。 原vue项目打包dist文件 1、首先以及必须，将config文件夹里的index.js文件中assetsPublicPath由'/'改为 '...
vue-解决项目打包index页面空白详情方案
种子不服古怪的博客
03-02 2594
问题描述 使用npm run build打包项目之后,dist文件夹下的index.html页面出现空白的情况. 排除写代码时路径不正确的情况 解决方法: 1.修改在项目目录下的config文件夹下的index.js 找到build这一块,assetsPublicPath:’/‘更改为’./’ **注意是多加了一个点 ** 2.去掉路由history模式 默认是hash,如果非要使用histor...
vue项目打包后首页一片空白解决办法和具体原因总结
热门推荐
吹过麦田的风的专栏
08-20 3万+
很高兴在万千文章中你看到本章，希望能为你解决问题！！！ 在最初用vue+webpack+vue-router做项目的时候，在本地pc开发测试都是正常的，但是在把代码打包部署到测试服务器之后，访问项目首页总是白屏。 第一种，打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。 解决办法：修改一下config下面的index.js中bulid模块导出的路径。因为index.h...
vue-cli打包到部署到nginx服务器
weixin_34192816的博客
07-06 2117
最近公司把云平台产品用vue 前后端分离的框架来写，前面大部分开发都比较顺利，后面打包部署出了bug 现在记录下自己遇到的哪些坑 1，我直接npm run build 打包出来，打开dist目录下面的index.html 空白页，页面上出现  no "NODE ENV"是我打包时没有指定打包到哪个环境 正确打包是 npm run build:prod   2.关于vue-router 中...
Vue项目用build打包，dist打开页面空白+Css样式混乱的坑，解决方法
baluo8339的博客
07-02 1687
前言： 在Vue项目开发中，或多或少都踩过build 打包的坑，这里针对build打包后，需要查看dist页面出现空白，和后续css样式出现混乱的最快解决方法！！ 正文： 　　　项目完成后，开始打包，不多说，直接 npm run build 命令，回车。 　　　（注：前提是你需要安装 node.js环境,否则无法运行，不懂自行Google。） 　　 在 build 打包...
vue-cli打包后本地运行dist文件中的index.html
Heart_At_You的博客
03-02 2758
使用npm run build生成dist文件夹中的文件是你需要上传到服务器上的文件， 直接打开index.html会直接报错 可以尝试用express搭建一个服务器，做法如下： 1、在dist根目录下新建server.js文件； 2、代码如下： var express = require('express'); var app = express(); const hostname = 'lo...
vue2.0打包之后访问是空白页面
进步的记录
07-17 2038
npm run build 之后访问index.html是空白页面，原因是打包文件路径配置不对。 解决： 1、找到工程的config文件夹下的index.js，将build的assetsPublicPath改为'./' assetsPublicPath是打包之后index.html里面引用别的资源的相对地址 2、找到工程的build文件夹下的utils.js文件，将publicPa...
vue打包后index文件一片空白
github_38469586的博客
07-25 4744
vue项目你npm run build打包后，点开index文件打开一片空白， 并报错解决方法：路径问题，
vue打包后dist页面空白
小不点的博客
11-05 2990
项目中自己的VUE项目通过npm run build打包生成的dist文件，打开本地dist文件夹的index.html页面一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的...
解决输入run build打包后打开index.html页面为空白
归零
12-29 6334
最近实习遇到不少问题，各种折腾，一方面可能是自己太菜，另一方面可能也存在自己对脚手架的好多技术还不深入的盲区。
Vue 2.0多页面应用开发模板指南
对于标题中提到的“vue20多页面应用模板”，我们可以推断这是一个基于Vue.js 2.0版本构建的多页面应用模板。通常，该模板应该包含以下关键部分： #### 根目录文件结构 1. `index.html`：应用的入口HTML文件，里面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值