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

最新推荐文章于 2025-03-18 09:53:02 发布
最新推荐文章于 2025-03-18 09:53:02 发布
阅读量2k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css3 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_54000091/article/details/123772015
本文介绍了解决Vue项目中二级页面出现404错误的方法。通过调整vue.config.js中的publicPath设置，并修改router配置文件中的路由模式及base属性，确保所有页面正确加载。

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

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

在这里插入图片描述

Vue项目部署线上后页面空白解决办法, Vue项目打包发布线上后页面空白, 控制台报错解决方案
gu_eu的博客
11-24 1910
Vue项目部署线上后页面空白 这里将路由模式改成hash模式 const router = new VueRouter({ base: '/', mode: 'hash', routes, }) export default router 在Vue2.6 版本 vue.config.js 文件是需要我们自己创建的 创建文件后写下如下代码 module.exports = { publicPath: '/', // 注意 这里使用 / 如果不行的话 就 ./ outpu
vue项目打包后部署服务器访问页面,Vue项目打包后,部署在服务器,访问页面出现空白一片...
weixin_39768917的博客
08-02 1620
"好一似,食尽鸟投林,只剩下白茫茫大地,倒也真干净!"html''Vue项目打包后,部署在服务器,访问页面出现空白一片, 到也真干净!"vue一. Vue项目打包循序渐进的开发完程序后, 每一个厨艺精湛的程序猿都迫切的想打包部署运行. 可是, 程序猿的世界,不如意的事情,十之九九.nginx运行这个牛X的指令, 并以下图同样,即打包成功了.vue-clinpm run build 二.部署运行将...
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 6695
之前项目遇到个情况，npm run build打包之后上传到服务器后，index.html打开一片空白，资源都加载了，但是就是不显示。 然后百度找了原因，修改了两处地方 一、修改 assetsPublicPath  在config/index.js里面，有个 assetsPublicPath 属性，源码是‘/’，修改成‘./’，加个点 assetsPublicPath: '/', 二、...
vue3打包后部分页面空白
Shawn的个人博客
08-03 773
一、问题描述 在开发模式下，使用命令npm run serve运行可以正常显示，但使用npm run bulid打包后打开index.html文件发现显示白屏，但是资源都能正常获取，其他页面也显示正常。 二、问题解决 查找了很长时间。发现问题是透明度的问题，原来我在一个页面设置的透明度为75%，但是打包后显示则为1%，原因好像是预处理器无视了百分号，把75这个值clip到1%，因此无法显示出来。这里把opacity设置为小数，把75%设置为0.75重新打包即可正常显示。 ...
解决部署vue时，访问地址出现的空白页问题
野的博客
03-22 1374
检查 Vue-router 中使用的是哪种模式 ：hash模式和history模式 使用hash模式可以解决空白页的问题，原因路由路径的问题导致的，如果history模式，你使用nginx启动，那么再根目录下是没有问题的，但是使用tomcat的时候，就会出现空白页 ...
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. ...
Vue项目webpack打包部署到服务器的实例详解
08-29
文章中提到，尽管在打包部署过程中遇到了一些问题和挑战，但通过不放弃和积极尝试，最终还是成功地将Vue项目部署到了服务器。这个过程中，对`config/index.js`文件中的`assetsPublicPath`的正确配置是关键。此外，...
vue项目打包后预览空白
最新发布
qq_33298964的博客
03-18 655
【代码】vue项目打包后预览空白。
vue 3.0用history路由打包后出现空白页面
qq_39851888的博客
12-08 4170
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 1274
vue.config.js文件未配置，3.0需要手动配置。 添加 module.exports = { publicPath: './', outputDir: "dist", // 输出文件目录 lintOnSave: false, // eslint 是否在保存时检查 assetsDir: 'static', // 配置js、css静态资源二级目录的位置 indexPath: 'index.html', } 即可 ...
vue项目二级域名访问出来是空白页
晨曦月的博客
07-29 1029
默认打包出来的项目运行在根目录可以正常显示，如果在二级域名下就会显示空白，是因资源引用路径及路由模式不同导致的。 vue.config.js 文件中可以将publicPath这个配置加上： module.exports = { publicPath: process.env.NODE_ENV === 'release' ? './' : '/', devServer: { disableHostCheck: true }, chainWebpack: conf
vue.js部署项目页面空白问题
qq_33871178的博客
11-27 2784
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 2910
在项目根目录下，新建一个vue.config.js文件 内容为： module.exports = { // 基本路径 publicPath: './', // 输出文件目录 outputDir: 'dist', configureWebpack: { externals: { } } } 再npm run build一下，看是不是可以浏览器打开inde...
解决vue3打包过后空白页面
小菜鸟的博客
04-08 4187
解决vue3打包过后空白页面 在项目根目录下，新建一个vue.config.js文件 module.exports = { // 基本路径 publicPath: './', // 输出文件目录 outputDir: 'dist', configureWebpack: { externals: { } } } 如果还是不可以，那么需要找到如下页面： ...
vue cli3 在build 打包完成，访问的时候空白页，路径错误
zxh7770的博客
06-04 1387
vue cli3 在build 打包的完成，访问的时候空白页，路径错误 阐述 在使用cli3 开发的过程中，不会出现空白页的问题，因为都是访问的localhost。但是项目完成以后，打包上线，访问的时候出现空白页。 解决方案如下： 在src文件夹同级目录下创建vue.config.js文件 这里在网上查看的有的是写：baseUrl，在npm run serve的时候发现会报错：Invalid options in vue.config.js: “baseUrl” is not allowed。原因是c
vue-cli 3.0 创建的项目,dev下能运行,打包后报错,页面空白，解决办法
y562363753的博客
07-23 1227
1. 在项目的根目录下创建vue.config.js文件 在vue-cli 3.0 创建的项目中是找不到webpack的配置文件，因为vue-cli 3.0 将其封装起来了，只需要在项目的根目录下的vue.config.js文件中修改就行了（若项目没有该文件，直接在根目录下添加一个），将baseUrl的值设为 ‘./’即可，修改如下： module.exports = { // 基本路径 publ...
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、付费专栏及课程。

余额充值