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

解决方法:

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. 01、etcd基础介绍

    互联网技术发展真的快,层出不穷的新技术.最近项目使用到了etcd,自己之前在部署k8s集群的时候玩过,但是并没有系统的学习.正好趁这个机会,系统性的学习下.文章中的内容有些是来自官方文档,有些是来自网 ...

  2. 【Azure 应用服务】Python3.7项目在引用pandas 模块后,部署报错 

    问题描述 参考"快速入门:在 Linux 上的 Azure 应用服务中创建 Python 应用" 文档,在App Service For Linux环境中部署Python应用,在添 ...

  3. BeanShell Sampler 前置处理器

    一概念: 前置处理器主要作用: 用于修改即将发送的http的请求数据 BeanShell预处理器可以在取样器发送请求之前被执行,可以通过它完成发送请求所需的数据 其中的ctx.vars.props.p ...

  4. Postman/Jmeter工具实现接口测试,为什么还要用代码来实现接口自动化测试?

    这种工具包括一些开源框架最大缺点就是不够灵活,如果是单接口的测试还行,但是有的项目接口比较庞大和负责,这种情况下就不大适用工具(工具适用于小型项目,代码适用于中大型项目) 主要有以下几个原因: 1敏捷 ...

  5. BeanShell 如何加密加签?

    一 首先我们要搞清楚接口签名步骤: **第一步:初步实现接口****第二步:找开发拿到算法和key** * key:sAHDRNJg0ZevmEn7HwBfbw== * 算法:HmacMD5 咱们就找 ...

  6. Codeforces Round 922 (Div. 2)(A~D)补题

    A题考虑贪心,要使使用的砖头越多,每块转的k应尽可能小,最小取2,最后可能多出来,多出来的就是最后一块k=3,我们一行内用到的砖头就是\(\frac{m}{2}\)下取整,然后乘以行数就是答案. #i ...

  7. 闭关修炼180天----手写迷你版的tomcat-Minicat

    手写迷你版的tomcat-Minicat 小谈Tomcat Tomcat请求处理⼤致过程 Tomcat是⼀个Http服务器(能够接收并且处理http请求,所以tomcat是⼀个http服务器) 我们使 ...

  8. iMindMap 10 的使用体验 + 讯飞输入法 + windows防火墙 (完美)

    这个软件 最终的效果非常好. 但是有一个硬bug,就是输入光标 搜狗输入法和百度输入法,输入法获取不到,导致输入中文的时候,文字候选框位置特别远. 如果是纯英文 输入使用,就没有这个bug. 总结: ...

  9. Windows 2012 R2 修复CredSSP 远程执行代码漏洞 CVE-2018-0886

    本文基于window 2012 R2版本,各位参考下载自己版本对应的补丁包即可 说明 公司的安全性检查,需要修复服务器上的漏洞,其中有个漏洞是CVE-2018-0886,结果网上的资料和一番折腾,终于 ...

  10. Android 开发Day5

    展示项目 这是我的项目结构,补录的