这个问题百度了一下,各种各样的的回答都有,试了好多种方法,终于解决这个问题

解决方法:

1.在项目根目录下,新建  vue.config.js, 在文件中输入:

module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/'
}

2.修改路由配置,router/index.js

默认使用的 createWebHistory,就是因为使用的 createWebHistory,所以不显示内容,我们需要改成  createWebHashHistory

// 1.需要引入
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router' // 2.修改配置
const router = createRouter({
history: createWebHashHistory(process.env.BASE_URL),
routes
})

3.重新打包,然后就正常了

vue-cli4,vue3打包后页面无内容的更多相关文章

  1. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  2. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  3. vue+elementui项目打包后样式变化问题

    博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎,找到了问题所在以及解决办法:main.js中的引入顺序决定 ...

  4. 将vue的项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. ...

  5. vue通过webpack打包后怎么运行

    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...

  6. Struts2添加了<s:debug>后页面无效果的解决方案

    一.环境 Struts2版本 struts2.5 二.问题 在jsp页面中添加了<s:debug>后页面上无任何展示. 三.解决 在struts.xml中的struts节点下添加如下常量即 ...

  7. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  8. 配置vue项目将打包后图片文件的引用路径改为cdn路径?

    vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...

  9. vue项目webpack打包后修改配置文件

    从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...

  10. Vue通过build打包后 打开index.html页面是空白的

    最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直 ...

随机推荐

  1. Golang标准库之bytes介绍

    本次主要介绍golang中的标准库bytes,基本上参考了 字节 | bytes .Golang标准库--bytes 文章. bytes库主要包含 5 大部分,即: 常量 变量 函数 Buffer R ...

  2. 第一篇博客——MarkDown语法

    Markdown学习 标题 三级标提 四级标题 字体 Hello World ! 两个星号加粗 Hello World ! 一个星号斜体 Hello World ! Hello World ! 两个波 ...

  3. 【Azure Redis 缓存】Azure Redis 4.0 被扫描到漏洞,如何修补呢?

    问题描述 在安全级别要求高的公司中,任何系统都会进行安全扫描.比如Azure 云上的Redis服务,也在扫描的范围中,最后发现Redis 4.0存在以下漏洞: CVE-2019-10192:https ...

  4. 专访容智信息柴亚团:最低调的公司如何炼成最易用的RPA?

    专访容智信息柴亚团:最低调的公司如何炼成最易用的RPA? 专访容智信息柴亚团:终极愿景是助力天下企业成为数字化孪生组织 文/王吉伟 6月,容智信息(容智)正式发布了全新的移动端RPA产品iBot Mo ...

  5. PostgreSql一个月学习计划

    1.背景 国内使用数据库最多的莫过于mysql,大部分程序员第一次接触数据库就是mysql.(毕竟免费的 = =!)但近年来,有一些黑马出现(如下图),其中表现最突出的莫过于PostgreSQL.特规 ...

  6. [学习笔记] Rocket.Chat 安装与设置启动项

    这篇文章主要介绍手动安装的方式来安装Rocket.Chat,在Rocket.Chat官方有三种安装方式, 面向开发人员的直接使用meteor部署 传统的源码编译安装 Docker方式部署 接下来分别介 ...

  7. iview 日期组件 清空后验证没报红,需要在onChange 进行单独 validateField,因为空字符串校验没有触发

    // 日期组件的 onChange this.yourObj.xxxTime = item this.$refs.yourForm.validateField('xxxTime')

  8. RaspberryPi 树莓派 omxplayer 的音量设置方法实测有效!

    正确的设置初始音量的方法,其中n/100=你期望的初始dB值, omxplayer --vol n target.media omxplayer介绍 omxplayer 在github中的描述是一个弃 ...

  9. STM32进入HardFault_Handler的调试方法

    在编写STM32程序代码时由于自己的粗心会发现有时候程序跑着跑着就进入了 HardFault_Handler中断,按照经验来说进入HardFault_Handler故障的原因主要有两个方面: 1:内存 ...

  10. 适合新手练习的python开源经典源码

    一 前记 python学习离不开三要素: A.基础知识要熟悉 B. 练习源码要够量 C.实战项目要跟上 二 链接 书本的基础就看几本书就可以了,这里给出源码练习的经典开源源码: 该链接集合了pytho ...