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

解决方法:

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. Taurus.MVC WebMVC 入门开发教程5:表单提交与数据验证

    前言: 在本篇 Taurus.MVC WebMVC 入门开发教程的第五篇文章中,我们将学习如何处理表单提交和进行数据验证. 这是 Web 开发中非常重要的一部分,因为它涉及到用户输入数据的处理和有效性 ...

  2. Java 接口的使用

    1 package com.bytezreo.interfacetest; 2 3 /** 4 * 5 * @Description 接口的使用 6 * @author Bytezero·zhengl ...

  3. Alertmanager钉钉告警

    一.部署alertmanager 1.1 创建目录 mkdir -p /deploy/app/alertmanager/config chmod -R 777 /deploy/app/alertman ...

  4. Zabbix与乐维监控对比分析(五)——可视化篇

    前面我们详细介绍了Zabbix与乐维监控的架构与性能.Agent管理.自动发现.权限管理.对象管理.告警管理方面的对比分析,相信大家对二者的对比分析有了相对深入的了解,接下来我们将对二者的可视化功能进 ...

  5. Springboot-1.5.10.RELEASE 升级到 2.2.4.RELEASE版本遇到的一些问题总结

    由于现在springboot的主流版本都已经是2.x的了,因此自己也打算将项目中使用的springboot1.5.10升级到2.2.4这个版本. 自己也能够预料得到,在升级过程中肯定会遇到各种各样的问 ...

  6. immutable 不可改变的 mut ≈ to move = to change - 单词学习

    immutable im-不,非 + mut-改变 + -able. im 通 in able 有能力的 重点是 mut 的含义是 to change t 就是to mu 就是 change (*拉丁 ...

  7. stm32 串口DMA调试总结和反思

    一 引言 最近在调试stm32的多串口.没想到居然遇到那么多的问题.这里做一个总结,还是非常有必要的. 二 问题 这里先弄清楚几个问题. 1 串口有必要使用DMA吗? DMA可以在串口高速的时候不占用 ...

  8. 自我总结的git的使用

    git是什么 git是一个分布式版本控制工具,github是代码托管平台. git有什么用 保存文件的所有修改记录 使用版本号进行区分 随时可浏览历史版本记录 可还原到历史指定版本 对比不同版本的文件 ...

  9. System design summary

    system design https://github.com/donnemartin/system-design-primer Performance vs scalability scalabi ...

  10. 自定义MarkupExtension的学习,以及WPF中Combobox绑定枚举类型

    我们上一期讲到ComBobox绑定数据,https://www.cnblogs.com/guchen33/p/17630808.html 这次我们简单化一下, 正常来讲WPF中绑定不了枚举的像这样 / ...