vue3.0 vue-router4.0打包后页面空白的解决方法

开发环境可以正常渲染页面，路由跳转都没有问题，但是打包之后本地打开index.html出现报错或者页面空白的情况：

脚手架版本：

vue-router版本：

第一种报错-资源加载失败

这种错误是因为vue.config.js的配置里面 publicPath写了绝对路径，生产环境改为./相对路径即可，vue.config.js详细配置参考官方文档

第二种错误：无报错，js加载了，但是页面空白（router-view没有渲染任何内容）

这种情况是因为vue-router的history模式，history模式下访问页面地址栏的地址没有#

这种情况可以把history模式改为hash模式，丑是丑了点，但是我做的是手机端的页面，用户也看不见地址栏，所以无所谓吧（丑总比加载不出来好）

在配置路由的router.js里面，把createWebHistory改成createWebHashHistory

然后就可以了。

到此这篇关于vue3.0 vue-router4.0打包后页面空白的解决方法的文章就介绍到这了,更多相关vue3.0 vue-router4.0打包空白内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue-router嵌套路由方式(页面路径跳转但页面显示空白)

    vue-router嵌套路由方式(页面路径跳转但页面显示空白)

    目录 如图所示从欢迎页跳转至用户列表 查询相关资料,有两种解决方案 如图所示从欢迎页跳转至用户列表 欢迎页:路径---welcome 用户页:路径---users 可以看到路径发生了跳转,但跳转后的用户列表页面显示空白.路由嵌套代码如下: 查询相关资料,有两种解决方案 1.path路径不用携带/ (未解决) 2.在home页面需添加router-view标签 在home页面的template下添加<router-view> </router-view>后,用户页面占据了整个页面,而

  • Vue-router的使用和出现空白页,路由对象属性详解

    Vue-router的使用和出现空白页 2018.08.28 更新 vue-router:前端路由系统--改变视图的同时不会向后端发出请求 1. hash 2.history 2018.06.25 更新 get到一个新技能 import Vue from 'vue' import Router from 'vue-router' import api from '../lib/service' //接口文档 Vue.use(Router) const router = { mode: 'hist

  • vue3.0 vue-router4.0打包后页面空白的解决方法

    开发环境可以正常渲染页面,路由跳转都没有问题,但是打包之后本地打开index.html出现报错或者页面空白的情况: 脚手架版本: vue-router版本: 第一种报错-资源加载失败 这种错误是因为vue.config.js的配置里面 publicPath写了绝对路径,生产环境改为./相对路径即可,vue.config.js详细配置参考官方文档 第二种错误:无报错,js加载了,但是页面空白(router-view没有渲染任何内容) 这种情况是因为vue-router的history模式,hist

  • Vue下路由History模式打包后页面空白的解决方法

    vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'his

  • vue3无config文件夹打包后页面空白问题及解决

    vue3无config文件夹打包后页面空白问题及解决

    目录 vue3无config文件夹打包后页面空白 项目场景 场景1:vue2有config文件夹 场景2:vue3无config文件夹 目录结构没有config文件夹 解决方案 vue3无config文件夹打包后页面空白 项目场景 项目场景:vue文件打包之后页面空白(全) 场景1:vue2有config文件夹 找到config文件夹下的index.js文件,将 assetsPublicPath: "/"改为assetsPublicPath: "./" 原理: 打包

  • vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法

    在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览.根据官网打包出来的html直接打开是显示空白. vue打包后显示空白正确处理方法是 1.找到配置文件 修改 这样打包处理可以打开但是页面样式会找不到 2.修改 找到对应的位置加上publicPath: '../../' 然后就成功了! 很多朋友还遇到这样的问题 vue打包后index文件一片空白,怎么回事呢? vue项目你npm run build打包后,点开index文件打开一片空白, 并报错解决方法:路径问题, 总结 以

  • vue+webpack 打包文件 404 页面空白的解决方法

    最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器上才可以运行, 例如 :nginx vue单页面的启动页面是index.html,路由的路径实际是不存在的,所以会出现刷新页面404的问题,需要设置所有找不到的路径直接映射到index.html 1 刷新页面404 配置启动文件的index页面的路径root: D:/workPlace

  • vue动画打包后失效问题的解决方法

    webpack 打包后动画未执行, 就是npm run build后在dist中生成的项目中动画未生效 解决: 找到build文件夹中 得vue-loader.conf.js,把extract的值改为false---如图 下面看下vue-cli 打包后自定义动画未执行的解决方法 在vue项目中,想实现无缝向上滚动的自定义动画效果 webpack 打包后动画未执行,就是你npm run build生成的dist中动画未生效 @-webkit-keyframes move { 0%{ top:0;

  • Vue打包后页面出现空白解决办法

    一. vue-cli创建项打包后打开页面为空白的问题解决 命令行输入:npm run build 打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目. 二.打包完成后配置会自动生成vue.config.js文件,这个文件非常重要值得你收藏 配置如下: const path = require("path"); const resolve = function(dir) { return path.join(__dirname, dir); }; module.expo

  • 解决vue+elementui项目打包后样式变化问题

    博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染. 代码如下: main.js // The Vue build version to load with the `import

  • 解决vue脚手架项目打包后路由视图不显示的问题

    脚手架vue-cli 搭建的项目,build后放于服务器上,发现其他资源全部变成静态加载成功,但路由视图为空,最初以为是webpack打包的问题,找了好久发现是路由配置问题. 解决办法如下: Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', base: '/system/', //添加根目录 scrollBehavior: () => ({ y: 0 }), routes }) 比如我是将打包后的dist和ind

  • vue cli3.x打包后如何修改生成的静态资源的目录和路径

    目录 vue cli3.x打包后修改生成的静态资源的目录和路径 vue3.3打包后,路径出错问题 vue cli3.x打包后修改生成的静态资源的目录和路径 在vue cli 2.x版本修改目录和路径,都在'/config/index'文件里修改. 但是vue cli升级成3.x发现这些文件都不见啦,就一个'vue.config.js'文件,我们可以在这里修改: `module.exports = {   // 没有书写outputDir属性   默认'dist'  对应dev.assetsSub

随机推荐