vue-cli 4.0 路由history模式打包之后，后台无报错，本地打开index，以及放到服务器 页面一片白的问题

最新推荐文章于 2021-02-16 13:25:16 发布
最新推荐文章于 2021-02-16 13:25:16 发布
阅读量1k 收藏
点赞数
分类专栏： 遇到的坑 问题 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41894940/article/details/105651511
版权

网上搜了N种方法，试验了N中方在这里插入图片描述法都不行，最后发现给路由配置一个通配符 * 就能解决页面空白问题。
如果大佬我更好的解决办法，希望告知一下小弟

会飞的乌龟哟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Vue下路由History模式打包后页面空白的解决方法
08-27
主要介绍了Vue下路由History模式打包后页面空白，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
weixin_56035334的博客
07-11 7549
1.github是不是不能部署带有接口项目的前台电商项目啊 是不是得买服务器才能在线看啊 静态的我会部署，但是这个电商项目带了接口，我想应该不可以就这样放上去的 2.用npm run bulid打包后的index是不是不能直接打开。我百度了方法，都是让我改路径，但是他们都用webpack打包的，我这个是用npm init初始化的，并没有webpack下面的路径，所以我也改不了 3.那要怎么把这个前台项目部署到服务器上呢，是不是只能买个服务器来部署呀！！我主要想实现在线预览，给别人也可以看到做过的项目，
vue 打包完自己本地能够直接打开index.html
qcg14774125的博客
04-14 6207
第一步修改config里面的index.js 把 assetsPublicPath：'/' 修改成 assetsPublicPath='./' 第二步修改build里面的util.js if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, pub...
Vue下路由History模式打包后页面空白
sky2714的博客
07-02 6234
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息.这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官...
vue-cli history模式实现tomcat部署报404的解决方式
10-16
在Tomcat中部署Vue CLI构建的项目并采用`history`模式时，遇到404错误的主要原因是服务器没有正确地配置来处理这些动态路由。为了解决这个问题，我们需要按照以下步骤进行配置： 1. **打包Vue CLI项目**： 使用`...
vue-cli 打包使用history模式的后端配置实例
10-17
以下是将 Vue CLI 项目打包并配置为使用 history 模式的详细步骤： 1. **修改 Vue CLI 配置**： 在 `config/index.js` 文件中，找到 `build` 对象，确保 `assetsPublicPath` 设置为绝对路径 `'/'`。这样，Vue 将...
详解如何将 Vue-cli 改造成支持多页面的 history 模式
08-28
总之，将Vue-cli改造为支持多页面的history模式涉及修改webpack配置、引入中间件以及调整服务器配置。这个过程虽然有些复杂，但一旦完成，可以为用户提供更加自然和友好的URL体验。在实际开发过程中，了解这些配置...
浅谈vue项目4rs vue-router上线后history模式遇到的坑
10-17
总的来说，使用Vue Router的`history`模式时，必须考虑到服务器配置的影响，确保在用户刷新页面或直接访问URL时，服务器能够正确处理请求。通过服务器配置或使用中间件，可以有效解决这个问题，实现平滑的前端路由...
Vue-cli打包后部署到子目录下的路径问题说明
10-14
在使用 Vue CLI 打包应用时，可能会遇到将应用部署到服务器子目录下的情况。本篇文章将详细解析这个问题及其解决方案。 首先，当 Vue CLI 打包应用时，默认会生成一个静态资源文件夹，通常命名为 `dist`，这个...
vue打包文件本地打不开
github_38928905的博客
05-08 3097
这种问题通常在console中会看到index.html关联不到其他文件了。 解决：config.js中，改静态文件的引用路径‘/’改'./' build: { assetsPublicPath: './',
vue 项目打包本地访问--history模式入坑
weixin_37347069的博客
12-05 6830
问题重现：vue2.x 版本router去掉url中#，即history模式，打包后,http-sever启动服务访问不出页面？ history模式的设置如下 const router = new Router({ mode: 'history', // 去掉url中的# ... }); http-sever启动服务 1、http-server安装及运行 2 、http-server...
vue-cli4x history模式 部署在子目录，以及服务器端的nginx配置
mrhaoxiaojun的博客
04-08 1761
生产环境打包到子目录 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/test/' : '/', outputDir: 'dist/test', assetsDir: 'static', } 路由增加根目录 在vue-router配置中增加base属性，声明路由根目录 export d...
vue项目history模式打包部署及nginx配置(vue-cli4.0)
qq_34465778的博客
06-28 1983
vue.config.js中配置publicPath 配置为相对路径 ‘./’ ，这样即使项目不放在根目录下，也不会有找不到静态资源的情况 module.exports = { publicPath: './', } 一、打包部署到根路径 路由配置 export default new VueRouter({ mode: "history", routes }); 打包完成的代码放到nginx项目根目录my-project中，配置nginx：conf/nginx.conf location
vue -- vue-router的history模式打包后页面空白的解决方案
热门推荐
积少成多
07-25 2万+
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 采坑记录，以便后面翻阅 首先你需要确认页面空白不是由资源文件路径不正确引起的，如果资源找不到就将绝对路径改为相对路劲，具体解决方案看这里：webpack–资源和css中图片引用打包为相对路径的方案 问题现象 在本地开发环境没有任何问题，路由也正常显示，但是打包并部到服务器之后，访问页面就是空白，看控制台...
vue-cli4下history模式刷新后404错误解决
02-16 477
实测 Linux 系统 Apache 配置： 在宝塔面板上点击网站，修改配置文件： RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]
用Vue -Cli写一个登陆页面并且登陆成功后跳转到一个可以增加删除修改查询的页面
最新发布
05-27
好的，我可以为您提供一个简单的Vue-Cli登录页面的示例代码。但是，由于我是一个AI，我无法为您提供一个完整的增删改查页面。您可以在代码中添加您自己的逻辑来实现这个功能。 首先，我们需要创建一个Vue-Cli项目，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会飞的乌龟哟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值