Vue3 vite build 之后不显示页面内容,只显示空白,也没有报错如何解决

这篇具有很好参考价值的文章主要介绍了Vue3 vite build 之后不显示页面内容,只显示空白,也没有报错如何解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue3 vite build 之后不显示页面内容,只显示空白,也没有报错如何解决

我的项目在 build 之后就插入到我的主网站的 /tools/image 路径下使用的,并非主网站,所以需要配置两个地方:

1. 修改 vite.config.js

添加 base,意思是 build 之后的外部资源都从当前目录的相对路径获取。
比如 main.js 不是 /main.js 而是 ./main.js

export default defineConfig({
    base: './',
})

2. 需要修改 router.js 中的 history 选项

我不知道是什么原理哈,反正是管用,之前在没有使用 vite 的时候也是在 router 中关闭这个选项的,所以差不多的事应该。

router.js

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  // 它本来默认是  createWebHistory()
})

结果

这样在 build 之后就能正常显示了文章来源地址https://www.toymoban.com/news/detail-647068.html

到了这里,关于Vue3 vite build 之后不显示页面内容,只显示空白,也没有报错如何解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • electron项目打包之后显示空白页面以及发送http请求地址错误

            electron项目在开发阶段,因为使用webpack脚手架,启用了webServer提供的http服务,所以有路由功能,当我们运行npm run electron:serve的时候,最后可以直接加载http://localhost:8080。在app里面就可以显示页面。     当electron项目打包之后,成为桌面程序,这个时候就没有http服务支

    2024年02月13日
    浏览(25)
  • vue3 vite 打包 二级目录刷新空白

    控制台报错:Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of \\\"text/html\\\". Strict MIME type checking is enforced for module scripts per HTML spec. 打包路径问题,修改vite.config.ts文件的base

    2024年02月09日
    浏览(43)
  • vue3打包后页面空白解决方法

    最近写一个小项目 没有打包的时候一切正常 技术栈用的vue3 + vite 我用的是npm创建的项目 问题一 :打包后页面空白,什么都没有 问题二:刷新页面后找不到资源 把url的index.html去掉后可以正常显示但是刷新后又会出现新的问题 问题如下 第一步 先在vite.config.js中添加一行代码

    2024年01月16日
    浏览(31)
  • Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + 微前端(qiankun) 后台管理系统模板(已开源---显示项目页面截图)

    Wocwin-Admin,是基于 Vue3.2、TypeScript、Vite、Pinia、Element-Plus、Qiankun(微前端) 开源的一套后台管理模板;同时集成了微前端 qiankun也可以当做一个子应用。项目中组件页面使用了Element-plus 二次封装 t-ui-plus 组件,目前已新增fastmock接口。 Link:https://wocwin.github.io/wocwin-admin/ 账号:

    2024年02月08日
    浏览(48)
  • vue3在运行时路由可以正常跳转,但是页面空白,刷新页面恢复正常[已解决]

    vue3在运行时路由可以正常跳转,但是页面空白,刷新页面恢复正常,在网上寻找很久说是keepAlive的原因,后来看了看我的代码~ 原来的代码: 改后的代码: 由此可见,根元素一定要由一个div去包裹住! template必须有且只能有一个div 在这样才会正常显示~ 原理: 这里我们要先

    2023年04月27日
    浏览(41)
  • vue3+vite+ts项目搭建之后,vscode文件夹下红色波浪线问题

            搭建完vue3+vite+ts项目之后,用vscode打开项目,发现 .vue 文件和 main.ts 文件夹下都有红色破浪线(如下图所示)。几番周折终于解决了这个问题。 1. 解决.ts文件报错 报错原因:ts不识别.vue后缀的文件。 解决方式:创建脚手架的时候,项目的根目录下会生成一个en

    2024年02月04日
    浏览(36)
  • vue3+vite静态页面部署到gitee pages

    随着vue3的成熟,vue2将在2023.12.31停止维护,所以有必要搞一下vue3项目静态页面怎么部署到gitee中了 如果还有想部署vue2静态页面到gitee中的话,访问https://blog.csdn.net/qq_45952585/article/details/122514028?spm=1001.2014.3001.5502 vue3+vite+ts脚手架创建就不写了,随便搜一搜,一大把,直接上重点

    2024年02月03日
    浏览(43)
  • vue3-ts-vite:vue 项目 配置 多页面应用

    一、Vue项目,什么是多页面应用 Vue是一种单页面应用程序(SPA)框架,这意味着Vue应用程序通常只有一个HTML页面,而在该页面上进行动态的内容更改,而不是每次都加载新的HTML页面。  但是,有时候我们需要在同一应用程序中拥有多个独立的页面,每个页面都可以单独处理

    2024年02月14日
    浏览(30)
  • vue项目切换页面会白屏,刷新之后才会正常显示(已解决)

    面对这种问题有两个方面: 1.就是template中没有div标签/template 错误写法: 正确写法:  切记:div标签必须是包裹住所有的标签,除了template外这个div就是爹 2.template中有div标签/template 错误写法:原因:他会把注释当作为一个节点,所以div就不是最大的容器了,他要先识别div标

    2024年02月10日
    浏览(44)
  • vite打包静态文件打开显示空白

    需求场景 本地调试访问打包的文件看是否有啥问题,方便定位线上问题 安卓手机需要去直接访问静态文件,而不是访问域名的情况 vite 打包生成的文件如果直接放在服务器中是可以正常访问的,但是本地直接访问打包生成 index.html 文件就会提示以下问题。 访问的文件不存在

    2024年02月02日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包