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

解决方法:

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. Java 接口的使用

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

  2. Java Eclipse JUnit单元测试

    1 package com.bytezreo.ut; 2 3 import org.junit.Test; 4 5 /** 6 * 7 * @Description Java中的JUnit单元测试 8 ...

  3. XSS漏洞原理整理

    一.通常使用XSS脚本来获取浏览器版本信息,alert(navigator.userAgnet )  ,浏览器的UserAgent是可以伪造的,比方火狐或者很多扩展都可以屏蔽或者自定义浏览器发送的Us ...

  4. 我为什么使用Linux做开发

    系统选择 目前市面上主流的桌面操作系统在大多数人眼里只有Windows和MacOS,那为什么我没选择它们两呢? 首先,不选MacOS的原因,就是太贵.当然这是我的原因不是苹果的原因,我最早使用Linu ...

  5. iview 表单验证 爆红后,有某些组件现隐,爆红和必填会错位,解决方案 组件上加key

    iview 表单验证 爆红后,有某些组件现隐,爆红和必填会错位,解决方案 组件上加key

  6. vxe table columns 要用data里的值,用computed的值会导致排序部分不好用。

    vxe table columns 要用data里的值,用computed的值会导致排序部分不好用.

  7. 关于Java执行Cmd命令出现的死锁问题解决

    原文:关于Java执行Cmd命令出现的死锁问题解决 - Stars-One的杂货小窝 问题 之前研究了Java通过执行cmd命令从而触发Android打包的思路,但是发现Android打包成功之后,后 ...

  8. PBKDF2算法:保障密码安全的利器

    PBKDF2算法起源: PBKDF2(Password-Based Key Derivation Function 2)算法是一种基于密码的密钥派生函数,最初由RSA实验室的密码学家提出,用于从密码中 ...

  9. Ubuntu 14.04 升级到Gnome3.12z的折腾之旅(警示后来者)+推荐Extensions.-------(二)

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文发布于 2014-12-22 15:33:35 ...

  10. RabbitMQ集群运维实践

    一.RabbitMQ的集群模式 主要有两种:普通集群模式和镜像队列模式.下面分别介绍这两种模式的原理: 1.普通集群模式: 在普通集群模式下,RabbitMQ的集群节点之间主要同步元数据,而不同步存储 ...