vue打包后index文件一片空白

最新推荐文章于 2025-05-11 22:08:26 发布
原创 最新推荐文章于 2025-05-11 22:08:26 发布 · 4.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue 打开

本文介绍了解决Vue项目使用npm run build打包后，打开index文件显示空白并报错的问题。主要原因是路径配置不正确导致资源加载失败。

vue项目你npm run build打包后，点开index文件打开一片空白，


并报错解决方法：路径问题，



vue项目打包后打开index.html一片空白
ai
03-16 2302
首先，我们来解释一下vue脚手架项目启动项目的原理，其实，在你使用 npm run dev或npm run serve的时候，实际是临时创建了一个webpack-dev-server或vue-cli-service serve的node服务器，为了方面后面的 hot-reload（热重载）的需求，必须所有的更新都要在服务上处理后进行更新，如果你是单纯用file协议打开静态网站的方式，是没有办法做到这个处理的，如果可以，也是需要编译和重载的，成本很高昂。http模块是node.js原生模块中最为亮眼的模块。
vue 2.0创建项目打包后index出现空白页面
ZJ15981837003的博客
07-21 452
前言：今天创建一个新的项目，打包过后检查index页面出现空白，百度了一下，vue2.0 打包之前需要修改几处地方！！！ 1.打包之前修改三个文件 1.1.第一步，找到build文件，在webpack.prod.conf.js 第25行左右 有一个对象为 output,在这里面增加一行代码 publicPath:’./’ output: { //在这里加一行代码 publicPath:’./’, path: config.build.assetsRoot, filename: utils.assetsPat
解决vue项目打包后打开index.html一片空白
sinat_36141399的博客
11-30 1万+
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 ...
vue打包之后出现空白页的原因以及解决方式
热门推荐
温情
04-02 3万+
路由模式 history 新建项目什么都不动，路由模式：history, 直接npm run build打包 打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/' 那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath 我们只需要在和package.json同级的地方新增一个vue.config.js文
vue文件打包之后打开index.html发现一片空白
rating_的博客
03-04 1416
原因：打包之后的文件加载资源的路径不对 解决办法： 在vue.config.js文件中修改路径 module.exports = { publicPath: './' } 如果router/index.js文件里面有mode: 'history’的话删去或者注释即可 ...
vue 打包空白
qq_38388578的博客
01-04 312
1、改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径  assetsPublicPath默认的是  ‘/’  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ ’ 2、另外还需要注意一点。src里边rou...
vue打包下来后打开的index.html页面是空白的
m0_62783418的博客
02-16 2246
对vue项目打包下来后打开的index.html页面时呈现空白的页的一种解决方法
Webpack打包vue项目后发现index.html为空白
最新发布
EdgeWorld的博客
05-11 509
之后我发现其中也有history出现，但不能像上面那样直接修改history为hash，而是需要注意到'vue-router'中还有一个函数是‘createWebHashHistory’，将原来代码的‘createWebHistory’函数替换掉，得到。此时再重新运行npm run build，得到的index.html不再是空白。今天在用Webpack打包vue3项目后，发现index.html一直是空白，于是我在网上找到该方法：修改相对路径 “/” -> “./”，
Vue通过build打包后 打开index.html页面是空白的
一劍傾城
01-22 1024
Vue通过build打包后 打开index.html页面是空白的 最近在build打包vue项目遇到了几个问题，如下： 1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。 原因：找到c...
vue项目打包后index.html文件打开空白
guojing5721的专栏
11-08 1万+
build打包vue项目遇到的问题，如下： 1、npm run build打包项目之后，生成的dist文件里面有被压缩后的static文件跟index.html，直接打开index.html页面是空白的，还会报几个错，找不到页面路径。 原因：找到config文件下index.js，会发现build下的 assetsPublicPath：' / ' 默认为根目录，而index.html和stat...
vue打包后打开index.html之后页面是一片空白问题（找不到静态文件）
寂寥人生
11-27 828
vue.config.js 里面 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' } ok 搞定！！！ 程序员都是填坑的吗
vue项目打包访问index.html页面出现空白
muzidigbig的博客
01-04 9769
错误现象： 1.主要的问题就是路径问题 因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。 只要修改config文件夹里的index.js里的assetsPublicPath的值； config/index.js assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级...
vue.config 配置
tp27933的博客
09-25 1083
這裡記錄下 練習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 打包的问题空白
houdabiao的博客
09-19 415
vue 路由分为hash(默认是hash)和history  1.当时hash模式,当打包后是空白的，这是因为你的config文件下index.js文件，build对象下没有改成 assetsPublicPath: './', 2.当是history模式的时候，打包后放在ngnix下面，会有404的错误     （1）.404的解决方案         在ngnix配置  config 下...
解决vue打包项目后点击dist文件夹中的index.html网页显示一片空白的问题
qq_44475148的博客
11-19 8837
问题描述： vue项目完成后，用npm run build d打包项目后，出现dist文件夹，点击dist文件夹下的index.html页面出现一片空白。 原因分析： vue-cli3.0及以上版本没有configwe 解决方案： 提示：这里填写该问题的具体解决方案： 例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandl
vue 打包后空白
qq_42342276的博客
08-03 173
vue打包后空白，解决办法 第一步：将路由模式设置成hash模式 const router = new VueRouter({ mode: 'hash', }); 第二步：在代理vue.config.js文件下配置publicPath为'./' module.exports={ publicPath:'./', } 第三步：重新打包npm run build ...
解决：vue打包后在本地运行dist文件夹中index.html出现空白页面
m0_55333789的博客
01-09 1326
解决：vue打包后在本地运行dist文件夹中index.html出现空白页面
vue打包完index.html空白,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题-20210315083204.pdf-原创力文档...
weixin_34547317的博客
06-28 375
解解决决Vue项项目目打打包包后后打打开开index.html页页面面显显示示空空白白以以及及图图片片路路径径错错误误的的问问题题V ue项目运行npm run build后会生成一 dist文件夹，我们一般都是把这 文件夹部署到服务器上。dist文件夹里边有一 static文件和一 index .html页面，这 index就是最后单页面的最终文件。问问题题一一：：我在打包完成后，打开index...
vue index.html显示空白,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
weixin_36243860的博客
06-16 987
2019独角兽企业重金招聘Python工程师标准>>> Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。问题一：我在打包完成后，打开index.html文件发现地址并没有携带路由。 这样的话页面就是空白了，因为...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值