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

解决方法:

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. 工具 --- IL指令集解释

    引言 汇总一下所有的 .NET IL 指令,以及它们的名称.操作码值.堆栈转换行为和描述. 作为反编译IL代码时的查询字典. IL 指令集列表 以下内容来自微软官方文档,通过百度翻译API翻译为中文. ...

  2. JavaScript获取href的值

    1.当href的值为正常网址时: <!DOCTYPE html> <html> <head> <title></title> <met ...

  3. K8s中Labels(标签)和Annotations(注解)对比

    在Kubernetes中,Labels(标签)和Annotations(注解)都是用于为资源对象添加元数据的机制,但它们在用途.选择能力以及数据形式上存在一些关键的区别. 首先,Labels主要用于标 ...

  4. PE文件手工压缩

    序 本文要压缩的PE文件来自软件漏洞这门课上布置的作业,代码逻辑很简单,直接运行就能看出来,就是调库来弹两个对话窗口.笔者主要记录一下对这个文件的分析和一步步实现手工压缩的过程.在此提供原文件的下载方 ...

  5. SpringBoot+内置Tomcat配置,参数调优,最大并发量,最大连接数

    最近在研究这块的信息,记录下一些大神的文章: SpringBoot 最大连接数及最大并发数是多少???https://blog.csdn.net/weixin_44421461/article/det ...

  6. 【开源库推荐】#2 AndroidUtilCode Android常用工具类大全(附API使用说明)

    Blankj/AndroidUtilCode: Android developers should collect the following utils(updating). Download Gr ...

  7. 百度 Linux 运维工程师面试真题

    百度 Linux 运维工程师面试真题 百度面了好久了,两个月了,估计都快成馊面了,一跟面条在走边边一不小心掉进了大海,于是 就有了汤面_经历非技术总结就两句话,幸运的是在朋友的帮助下顺利通过笔试,还认 ...

  8. 打造餐饮+元宇宙新体验!实时云渲染赋能DQverse未来世界

    随着元宇宙的迅猛发展,实体餐饮产业与虚拟元宇宙之间的交汇愈发频繁.诸如海底捞.奈雪的茶.星巴克.王老吉.肯德基等知名餐饮品牌纷纷加大对元宇宙领域的投资与布局. 图源网络 最初只是线上虚拟餐厅的概念,如 ...

  9. WPF异步命令以及SqlSugar异步增删改查

    1.异步 /// <summary> /// 查询全部 /// </summary> /// <returns></returns> public as ...

  10. 聊聊微信小程序的隐私协议开发

    为什么需要隐私协议? 小程序隐私授权弹窗FAQ官方:https://developers.weixin.qq.com/community/develop/doc/00000ebac5c3e042384 ...