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

解决方法:

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. 02、etcd单机部署和集群部署

    上一章我们认识了etcd,简单的介绍了 etcd 的基础概念,但是理解起来还是比较抽象的.这一章我们就一起来部署下 etcd .这样可以让我们对 etcd 有更加确切的认识. 1.etcd单实例部署 ...

  2. webpack图片压缩

    减少代码体积 | 尚硅谷 Web 前端之 Webpack5 教程 (yk2012.github.io) npm install image-mininizer webpack plugin image ...

  3. 浅入 ABP 系列(7):对象映射

    目录 基础 DTO和实体 麻烦的映射 AutoMapper 集成 IObjectMapper/ObjectMapper 对象拓展 写博客的过程中,发现很多基础理论太薄弱,因此很多专业词汇可能会解释错误 ...

  4. 开源的 Sora 复现方案,成本降低近一半!

    近日,开发 ChatGPT 的 OpenAI 公司又放出王炸 Sora,一个可以根据文本生成视频的 AI 模型. 上图就是 OpenAI 公布的 Sora 生成的视频片段,可以毫不夸张地说 Sora ...

  5. 云计算 - 内容分发网络CDN技术与应用全解

    在这篇全面解析CDN的技术文章中,我们深入探讨了CDN的基础概念.核心架构.多样化产品和在不同行业中的应用案例.文章揭示了CDN技术如何优化内容分发,提升用户体验,并展望了CDN面临的挑战和未来发展趋 ...

  6. centos 养成计划

    20220720 常用命令 pm2 list pm2 delete all 启动前端 cd /root/website && pm2 start http-server 启动后端 cd ...

  7. end_of_line = lf 选择行尾序列 .editorconfig - 老项目不动代码存盘 文件变动 CRLF 的问题 vscode

    end_of_line = lf 选择行尾序列 .editorconfig - 老项目不动代码存盘 文件变动 CRLF 的问题 缘由 vscode 老项目代码,没有变动,ctrl + s后 文件有变化 ...

  8. eclipse错误之Errors occurred during the build. Errors running builder 'JavaScript Validator' on project

    把JavaScript Validator去掉.去掉的方法是:选择一个项目--右键Properties--Builders(排第二)--点一下右侧会有四项--取消第一项"JavaScript ...

  9. C#实时监测文件夹变化

    在开发各种应用程序时,我们经常需要对文件系统中的文件或文件夹进行实时监测,以便在文件内容改变.文件被创建或删除时能够及时做出反应.在 C# 中,System.IO.FileSystemWatcher ...

  10. Garnet发布 Redis不再是唯一选择

    Garnet 是 Microsoft Research 的远程缓存存储,提供强大的性能(吞吐量和延迟).可扩展性.存储.恢复.集群分片.密钥迁移和复制功能. Garnet 可以与现有的 Redis 客 ...