vue项目打包到后部署服务器，某些页面出现空白页

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

#css3 #javascript #css

本文介绍了解决Vue项目中二级页面出现404错误的方法。通过调整vue.config.js中的publicPath设置，并修改router配置文件中的路由模式及base属性，确保所有页面正确加载。

今天将vue项目打包后的文件放到服务器上，首页和有些其他模块页面可以访问。但是出现了一些二级页面空白，nginx报404的问题。
解决办法
1.首先找到 vue.config.js 的配置文件，如果没有可以手动创建。然后更改其公共资源目录,
如果是vue-cli3的项目，则更改publicPath:’./’ ,其他版本的另行查阅资料
效果如下
在这里插入图片描述
2.找到router配置文件，更改其路由模式为hash，并且base属性为随着项目环境变化而变化。效果如下

在这里插入图片描述

vue3实战-如何解决vue3项目打包发布到服务器后访问页面显示空白问题
0月影星云0的博客
03-21 5135
1、处理vue.config.js文件中的publicPath，处理如下： const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ publicPath: process.env.NODE_ENV === 'production' ? './' : '/', outputDir: 'dist', indexPath: 'index.html', lintOnSave: false,
vue项目白屏问题汇总，多方案详细解决
小圣贤君的博客
04-01 1万+
来了，兄弟，别急，咱们慢慢往下看。 项目打包之后，本地打开文件显示白屏了？ 微信公众号里打开项目白屏了？ 苹果手机打开白屏了？ 死活都有部分iPhone机型是白屏显示的？ 兄弟，别急，咱们走起…… 1，ios10 出现白屏 原因是由于ios 10中Safari中错误描述如下:当你定义一个与参数同名的for循环迭代变量时，我们错误地认为这是一个语法错误。解决方法如下： 进入build文件夹； 找到w...
Vue下路由History模式打包后页面空白的解决方法
12-09
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'history', 这个base即为项目路径. 以上两个都解决了,还是会发现,此时只有首页能访问,通
vue项目打包后页面出现空白
热门推荐
qq_24882601的博客
05-23 1万+
相信很多刚刚接触vue的伙伴会遇到这样的问题，就是说vue项目在开发环境下一切正常，但是打包之后，打开index.html页面却是一片空白，打开控制台发现这样的错误 出现这种情况要分两个处理方式（vue-cli2和vue-cli3），先说vue-cli2； 首先找到config/index.js文件，将assetPublicPath的路径改为“./”即可， vue-cli3...
vue项目打包之后页面空白解决办法
Dreamer_xr的博客
11-05 6778
之前项目遇到个情况，npm run build打包之后上传到服务器后，index.html打开一片空白，资源都加载了，但是就是不显示。 然后百度找了原因，修改了两处地方 一、修改 assetsPublicPath  在config/index.js里面，有个 assetsPublicPath 属性，源码是‘/’，修改成‘./’，加个点 assetsPublicPath: '/', 二、...
vue项目打包后打开页面空白解决办法
08-27
路径配置错误是导致Vue项目打包后页面空白的常见原因之一。在Vue项目中，index.html文件是项目的入口文件，其通过script标签引入了打包后的JavaScript和CSS等资源。如果这些资源的路径配置不正确，浏览器将无法正确...
vue项目打包后部署服务器访问页面,Vue项目打包后,部署在服务器,访问页面出现空白一片...
weixin_39768917的博客
08-02 1653
"好一似,食尽鸟投林,只剩下白茫茫大地,倒也真干净!"html''Vue项目打包后,部署在服务器,访问页面出现空白一片, 到也真干净!"vue一. Vue项目打包循序渐进的开发完程序后, 每一个厨艺精湛的程序猿都迫切的想打包部署运行. 可是, 程序猿的世界,不如意的事情,十之九九.nginx运行这个牛X的指令, 并以下图同样,即打包成功了.vue-clinpm run build 二.部署运行将...
vue项目打包部署到服务器的方法示例
10-18
1. **assetsPublicPath配置**：这个配置项用于定义在构建过程中资源文件的公共路径，如果在部署到服务器后出现资源加载空白页，很可能是由于这个配置项设置不正确导致的。在本示例中，将`assetsPublicPath`的值从`"/...
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
在使用Vue CLI构建项目时，有时会遇到打包后出现空白页和路径错误的问题。这些问题通常是由于配置不当或者对Vue CLI的打包机制理解不足所引起的。本文将详细解析这两个问题及其解决方案。 首先，让我们来深入了解...
解决vue 打包发布去#和页面空白的问题
10-18
总结来说，解决Vue打包发布时的`#`符号和页面空白问题，主要涉及以下几个步骤： 1. 在Vue Router配置中，将模式设置为`history`并设置正确的`base`。 2. 更新Webpack的`assetsPublicPath`为服务器上的应用路径。 3. ...
vue3打包后部分页面空白
Shawn的个人博客
08-03 801
一、问题描述 在开发模式下，使用命令npm run serve运行可以正常显示，但使用npm run bulid打包后打开index.html文件发现显示白屏，但是资源都能正常获取，其他页面也显示正常。 二、问题解决 查找了很长时间。发现问题是透明度的问题，原来我在一个页面设置的透明度为75%，但是打包后显示则为1%，原因好像是预处理器无视了百分号，把75这个值clip到1%，因此无法显示出来。这里把opacity设置为小数，把75%设置为0.75重新打包即可正常显示。 ...
解决部署vue时，访问地址出现的空白页问题
野的博客
03-22 1396
检查 Vue-router 中使用的是哪种模式 ：hash模式和history模式 使用hash模式可以解决空白页的问题，原因路由路径的问题导致的，如果history模式，你使用nginx启动，那么再根目录下是没有问题的，但是使用tomcat的时候，就会出现空白页 ...
vue项目打包后预览空白
最新发布
qq_33298964的博客
03-18 772
【代码】vue项目打包后预览空白。
vue 3.0用history路由打包后出现空白页面
qq_39851888的博客
12-08 4203
vue 3.0用history路由打包后出现空白页面，出现这个问题可以先检查两个方面 1. 打包路径是否有误，这个打开控制台就可以看到，如果有出现报错，则说明打包的路径不对，这时要修改打包的路径。 比如项目是放在/dist/下，访问的路径为http://127.0.0.1/dist/，那打包的路径要修改为/dist/ router.js的设置 export default new Router({...
VUE3.0 build打包页面空白
weixin_57541273的博客
11-05 1295
vue.config.js文件未配置，3.0需要手动配置。 添加 module.exports = { publicPath: './', outputDir: "dist", // 输出文件目录 lintOnSave: false, // eslint 是否在保存时检查 assetsDir: 'static', // 配置js、css静态资源二级目录的位置 indexPath: 'index.html', } 即可 ...
vue项目二级域名访问出来是空白页
晨曦月的博客
07-29 1049
默认打包出来的项目运行在根目录可以正常显示，如果在二级域名下就会显示空白，是因资源引用路径及路由模式不同导致的。 vue.config.js 文件中可以将publicPath这个配置加上： module.exports = { publicPath: process.env.NODE_ENV === 'release' ? './' : '/', devServer: { disableHostCheck: true }, chainWebpack: conf
vue.js部署项目页面空白问题
qq_33871178的博客
11-27 2796
1，将项目打包 使用npm run build 命令，会在工程里生成dist文件夹 2.2.在服务器上的Tomcat的 webapps文件夹下,新建一个文件夹如dist 3.将tomcat shutdown以后upload到dist文件夹 4.如果上传以上出现空白页面，可以配置一下config 下的index.js文件里面的选项 ，assetsPublicPath 设置成绝对路径 5.然...
vue-cli3打包后，index.html出现空白页
happyyinlina的博客
01-17 2935
在项目根目录下，新建一个vue.config.js文件 内容为： module.exports = { // 基本路径 publicPath: './', // 输出文件目录 outputDir: 'dist', configureWebpack: { externals: { } } } 再npm run build一下，看是不是可以浏览器打开inde...
解决vue3打包过后空白页面
小菜鸟的博客
04-08 4218
解决vue3打包过后空白页面 在项目根目录下，新建一个vue.config.js文件 module.exports = { // 基本路径 publicPath: './', // 输出文件目录 outputDir: 'dist', configureWebpack: { externals: { } } } 如果还是不可以，那么需要找到如下页面： ...
vue项目部署到apache服务器刷新页面空白的问题
05-20
3. 确保服务器上已经安装了 Node.js 和 npm，并且运行了 npm run build 命令来打包项目。 4. 将打包好的文件放到 Apache 的网站目录下。 5. 重新启动 Apache 服务器，然后就可以访问 Vue.js 项目了。 如果还是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值