针对你遇到的“vue3 vite打包页面空白”问题,以下是一些可能的解决步骤和原因分析,帮助你定位并解决问题: 1. 确认项目结构和配置文件无误 检查vite.config.ts或vite.config.js配置: 确保配置文件中的路径设置正确,特别是base属性和resolve.alias配置。例如: typescript export default defineConfig({ base: process....
打包后页面打开空白可能是文件路径不对,修改vite.config.ts 文件里的 base 路径为 ./ 如果还是空白页面且没有报错,只是组件没有加载出来如下图: 这种情况是路由配置的错误,直接改一下 history 配置 再打包就可以打开页面了
1.文件路径不对 vite默认根目录"/",file://…访问需要基于index.html的路径,需要再vit.config.js中进行以下配置 2.跨域问题 vite构建打包后,默认启用ES Module,跨module加载引用涉及跨域,file://…没有跨域的定义 需要安装vite插件@vitejs/plugin-legacy npm i @vitejs/plugin-legacy -D 安装成功之后在vit.co...
安装好后,在打包默认的路径dist下进行访问,输入命令live-server浏览器会新打开一个页面,即是最终打包后要预览的页面 问题2:打包后的vue dist, 集成在android里,页面空白怎么办? 就我的白屏问题而言,是加载文件 加载不出来。如何操作: 安装@vitejs/plugin-legacy @vitejs/plugin-legacy地址 注意!!! 01ED9ED7.g...
问题一:我在打包完成后,打开index.html文件发现地址并没有携带路由。 这样的话页面就是空白了,因为没有组件被添加到页面中。打开F12会看到一堆的红色failed请求。打开请求地址是这样的。 进入D盘就开始寻找static文件夹当然是找不到的。既然知道了是打包之后寻找文件的地址错误,就去config文件夹下的index.js中寻找问...
vue3项目执行npm run build命令打包后,放到服务器下运行(部署流程与VUE2基本类似),访问的时候提示资源文件找不到: 访问的文件不存在,主要是因为路径配置问题。打包静态文件必须是根路径,否则放到服务器找不到静态资源(同理于webpack中的publicPath的配置)。解决方法为在项目根目录下的vite.config.js文件中添加base配...
是因为打包后script 标签上的type 属性发生了变化,变成了type='module' 处理方法 在vite.config.ts中引入这个包 yarn add @vitejs/plugin-legacy import legacyPlugin from '@vitejs/plugin-legacyy&…
访问路由空白无效果无报错;dev开发模式没问题,只存在build后通过服务打开页面存在问题。通过调试问题出在beforeEach代码: {代码...} 以上代码改成下面就可以访问了: {代码...} 路由使用 createWebHashHistory...