针对你遇到的“vue3 vite打包页面空白”问题,以下是一些可能的解决步骤和原因分析,帮助你定位并解决问题: 1. 确认项目结构和配置文件无误 检查vite.config.ts或vite.config.js配置: 确保配置文件中的路径设置正确,特别是base属性和resolve.alias配置。例如: typescript export default defineConfig({ base: process....
打包后页面打开空白可能是文件路径不对,修改vite.config.ts 文件里的 base 路径为 ./ 如果还是空白页面且没有报错,只是组件没有加载出来如下图: 这种情况是路由配置的错误,直接改一下 history 配置 再打包就可以打开页面了
vite.config.js 配置如下: 路由配置文件: 以上配置在本地运行正常,打包部署之后到线上就会有页面空白,静态资源访问404的问题,vite好像都有这个问题,下面说我解决上面问题的解决办法 我是通过在vite.config.js 中添加base:'/'配置并修改路由模式 ,路由模式由createWebHistory 改成 createWebHashHistory 就解决了问题!
vite项目浏览器兼容性 vue3打包后在低版本浏览器或webview中出现白屏,原因就是因为语法兼容问题。根据vite官方文档描述,build.target默认支持 Chrome >=87、Firefox >=78、Safari >=14、Edge >=88 传送,所以需要我们手动兼容低版本。 解决办法 1.首先安装插件:npm i @vitejs/plugin-legacy -D 2.然后配置vite....
Vue3 在 history 模式下通过 vite 打包部署后白屏; 起因hash 模式 url 后面跟个 # 强迫症犯了改成了 history,就此一波拉锯战开始了 ... 期间nigix 和 router 各种反复排查尝试最终一波三折后可算是成功了 ... Vue 官方文档 具体配置可供参考如下: ...
问题1: 打包后,直接点击index.html 显示空白问题 vite.config.js配置, 如果是打包时,base值变为./, 没有这个属性,则配上 base:'./' 这样做还不显示,原因如下: image.png 所以我们需要全局安装一个http-server或者live-server ,这里我用的是: npm install live-server-g ...
问题一:我在打包完成后,打开index.html文件发现地址并没有携带路由。 这样的话页面就是空白了,因为没有组件被添加到页面中。打开F12会看到一堆的红色failed请求。打开请求地址是这样的。 进入D盘就开始寻找static文件夹当然是找不到的。既然知道了是打包之后寻找文件的地址错误,就去config文件夹下的index.js中寻找问...
是因为打包后script 标签上的type 属性发生了变化,变成了type='module' 处理方法 在vite.config.ts中引入这个包 yarn add @vitejs/plugin-legacy import legacyPlugin from '@vitejs/plugin-legacyy&…