vue项目打包后一片空白

最新推荐文章于 2025-05-11 22:08:26 发布
转载 最新推荐文章于 2025-05-11 22:08:26 发布 · 434 阅读 · 3
文章标签：

#vue开发项目 #vue打包问题

本文介绍如何在config文件夹下的index.js中调整build模块导出的路径，并更改src/router/index.js中的路由模式以避免页面空白的问题。





修改在config文件夹下面的index.js中build模块导出的路径，assetsPublicPath默认的是’/’，也就是根目录。而index.html和static在同一级目录下面，所以改为’./’


另外在src里面router/index.js路由设置里边默认模式是hash，如果改成了history模式的话，打开也是一片空白。


随手附送个解决方案http://www.php.cn/js-tutorial-405421.html



vue项目打包后打开index.html一片空白
ai
03-16 2322
首先，我们来解释一下vue脚手架项目启动项目的原理，其实，在你使用 npm run dev或npm run serve的时候，实际是临时创建了一个webpack-dev-server或vue-cli-service serve的node服务器，为了方面后面的 hot-reload（热重载）的需求，必须所有的更新都要在服务上处理后进行更新，如果你是单纯用file协议打开静态网站的方式，是没有办法做到这个处理的，如果可以，也是需要编译和重载的，成本很高昂。http模块是node.js原生模块中最为亮眼的模块。
vue打包后显示空白正确处理方法
08-28
总的来说，解决 Vue 打包后显示空白页的问题需要细心排查，从项目配置到浏览器端的错误信息，每一步都可能成为关键。记住，每个项目的具体情况可能会有所不同，所以不要怕花时间去分析和调试。同时，保持项目结构...
vue项目打包后首页空白
qq_36229632的博客
12-06 755
VUE项目在运行npm run build后会生产一个dist的文件夹，该文件夹里就是项目打包后的文件。但是当我们打开index.html文件后发现首页是空白的。出现这种情况主要是因为路径不正确导致导致，具体解决方案如下！ 1.在config文件夹里找到index.js修改build配置，如下图assetsPublicPath默认是"/"修改修改成"./" 修改完成后我发现了首页可以正常打...
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
今天小编就为大家分享一篇解决vue-cli项目打包出现空白页和路径错误的问题。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目打包后打开是空白怎么办
weixin_51295096的博客
10-04 439
不一定可以解决你的问题，但不妨一试 项目打包以后网页一片空白，百度、bing了好久都没找到解决方案。最终终于找到了… 现在是2021年10月4日，你不需要像网上的教程说的那样修改vue.config.js中的publicPath, 更不需要添加什么 assetsDir，你只需要注释一行代码。。。。 是的，这行代码怎么突然不香了呢。。。。。你怎么能辜负我对你的喜爱呢 55555 啊，我逝去的几个小时时光啊！ ...
Vue项目打包之后页面空白的具体原因及解决办法
zLanaDelRey的博客
11-13 1776
本地运行时，页面还是正常的。但在使用npm run build对项目进行打包之后，index.html打开之后一片空白。 解决办法 修改config下的index.js文件。找到build将assetsPublicPath默认路径修改为'./' 修改之后再运行npm run build之后就会正常显示了 将路由模式history改成hash模式，改为mode: "hash"。路由默认配置为ha...
精选资源
vue项目打包后打开页面空白解决办法
01-21
网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的...
vue webpack打包后图片路径错误的完美解决方法
10-17
在使用Vue.js和Webpack进行项目开发时，遇到打包后图片路径错误的问题是常见的困扰。Vue CLI在构建过程中，默认的配置可能导致静态资源，如图片，无法正确加载。本文将详细解析这个问题的原因，并提供一种完美的解决...
vue项目打包后一片空白解决办法
weixin_46089851的博客
08-21 1116
vue项目打包后一片空白解决办法 网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。 module.exports = { build: { env: require('./prod.env'), i
vue项目打包后首页一片空白解决办法和具体原因总结
weixin_42017221的博客
02-17 3142
很高兴在万千文章中你看到本章，希望能为你解决问题！！！在最初用+webpack+vue-router做项目的时候，在本地pc开发测试都是正常的，但是在把代码打包部署到测试服务器之后，访问项目首页总是白屏。
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
热门推荐
青春木鱼的博客
07-14 2万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
vue文件打包之后打开index.html发现一片空白
rating_的博客
03-04 1417
原因：打包之后的文件加载资源的路径不对 解决办法： 在vue.config.js文件中修改路径 module.exports = { publicPath: './' } 如果router/index.js文件里面有mode: 'history’的话删去或者注释即可 ...
vue打包下来后打开的index.html页面是空白的
m0_62783418的博客
02-16 2250
对vue项目打包下来后打开的index.html页面时呈现空白的页的一种解决方法
Webpack打包vue项目后发现index.html为空白
最新发布
EdgeWorld的博客
05-11 517
之后我发现其中也有history出现，但不能像上面那样直接修改history为hash，而是需要注意到'vue-router'中还有一个函数是‘createWebHashHistory’，将原来代码的‘createWebHistory’函数替换掉，得到。此时再重新运行npm run build，得到的index.html不再是空白。今天在用Webpack打包vue3项目后，发现index.html一直是空白，于是我在网上找到该方法：修改相对路径 “/” -> “./”，
Vue通过build打包后 打开index.html页面是空白的
一劍傾城
01-22 1027
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 838
vue.config.js 里面 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' } ok 搞定！！！ 程序员都是填坑的吗
vue项目打包访问index.html页面出现空白
muzidigbig的博客
01-04 9775
错误现象： 1.主要的问题就是路径问题 因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。 只要修改config文件夹里的index.js里的assetsPublicPath的值； config/index.js assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级...
vue3项目使用electron-builder打包一片空白
09-07
Vue3项目使用`electron-builder`打包通常是为了将Web应用转换为桌面应用程序，以便能够在Windows、Mac和Linux等操作系统上离线运行。以下是基本步骤： 1. **安装依赖**： 首先，在你的Vue3项目中安装`@vue/cli-D @vue/cli-plugin-electron-builder electron ``` 2. **配置`vue.config.js`**： 在`vue.config.js`文件中添加或更新`build`部分，以启用Electron构建： ```js // vue.config.js const { defineConfig } = require('@vue/cli/config'); module.exports = defineConfig({ pluginOptions: { electronBuilder: { chainWebpack(config) { config.resolve.symlinks(true); }, // 更多配置项，如asar处理、icon设置等... }, }, }); ``` 3. **启动构建**： 运行以下命令开始构建： ``` vue build --mode production && electron-builder --production ``` `--mode production`确保生产环境优化。 4. **生成输出目录**： 完成构建后，将在dist/electron目录下找到打包后的应用程序。 5. **测试和部署**： 可以通过双击`dist`目录下的`MyApp.exe`或`.app`等文件来测试应用程序。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值