针对你遇到的“vue3 vite打包页面空白”问题,以下是一些可能的解决步骤和原因分析,帮助你定位并解决问题: 1. 确认项目结构和配置文件无误 检查vite.config.ts或vite.config.js配置: 确保配置文件中的路径设置正确,特别是base属性和resolve.alias配置。例如: typescript export default defineConfig({ base: process....
一、问题描述 项目build之后,点击dist文件中的index.html文件,打开是空白,提示以下信息。 二、产生原因及解决方法 1.文件路径不对 vite默认根目录"/",file://…访问需要基于index.html的路径,需要再vit.config.js中进行以下配置 2.跨域问题 vite构建打包后,默认启用ES Module,跨module加载引用涉及跨域,file://…...
vite.config.js 配置如下: 路由配置文件: 以上配置在本地运行正常,打包部署之后到线上就会有页面空白,静态资源访问404的问题,vite好像都有这个问题,下面说我解决上面问题的解决办法 我是通过在vite.config.js 中添加base:'/'配置并修改路由模式 ,路由模式由createWebHistory 改成 createWebHashHistory 就解决了问题!
安装好后,在打包默认的路径dist下进行访问,输入命令live-server浏览器会新打开一个页面,即是最终打包后要预览的页面 问题2:打包后的vue dist, 集成在android里,页面空白怎么办? 就我的白屏问题而言,是加载文件 加载不出来。如何操作: 安装@vitejs/plugin-legacy @vitejs/plugin-legacy地址 注意!!! 01ED9ED7.g...
这样的话页面就是空白了,因为没有组件被添加到页面中。打开F12会看到一堆的红色failed请求。打开请求地址是这样的。 进入D盘就开始寻找static文件夹当然是找不到的。既然知道了是打包之后寻找文件的地址错误,就去config文件夹下的index.js中寻找问题。index.js中的build命令的配置有一个属性叫assetsPublicPath,它的值...
3,npm run build打包页面空白 我们会发现页面head中引用的js和css文件是出现了路径错误,这里修改如下: 解决位置:config/index.js文件:把assetsPublicPath: '/'改为assetsPublicPath: './' build: { assetsPublicPath: './', } 1. 2. 3. 4,升级vue2+部分手机访问出现页面空白 ...
是因为打包后script 标签上的type 属性发生了变化,变成了type='module' 处理方法 在vite.config.ts中引入这个包 yarn add @vitejs/plugin-legacy import legacyPlugin from '@vitejs/plugin-legacyy&…
回到代码发现是我在使用Vuex的数据时按照往常习惯在前面加了this,我把this去掉重新npm run build打包,再打开npm run preview本地测试,错误就没了,页面也正常显示了。 修改前: 修改后: 二、配置Gitee Pages 在vite.config.js 中设置正确的 base。 如果你要部署在https://<USERNAME>.gitee.io/上 ...
vue3打包项目,发布nginx服务器后页面空白的 本地运行肯定是没问题的,但是打包后,用VScode live server插件打开,也是空白的,dom中,只有#app这个容器div。 不过,因为用的是createWebHistory路由模式,所以本地也不好测。 修复方法: vite.config.js配置中base使用绝对路径。