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

在Vue3项目使用vite构建后,页面显示空白,解决方法包括在vite.config.js中设置base为./,确保资源路径正确,以及在router.js中将history模式改为createWebHashHistory,防止路由问题。应用这些更改后,build的项目能正常显示。
摘要由CSDN通过智能技术生成

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 之后就能正常显示了

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十月ooOO

许个愿,我帮你实现

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值