打包后页面打开空白可能是文件路径不对,修改vite.config.ts 文件里的 base 路径为 ./ 如果还是空白页面且没有报错,只是组件没有加载出来如下图: 这种情况是路由配置的错误,直接改一下 history 配置 再打包就可以打开页面了
一、问题描述 项目build之后,点击dist文件中的index.html文件,打开是空白,提示以下信息。 二、产生原因及解决方法 1.文件路径不对 vite默认根目录"/",file://…访问需要基于index.html的路径,需要再vit.config.js中进行以下配置 2.跨域问题 vite构建打包后,默认启用ES Module,跨module加载引用涉及跨域,file://…...
原因:嵌套的浏览器版本过低进行兼容即可 vite代码版本较高,导致低版本浏览器无法运行 vite项目浏览器兼容性 vue3打包后在低版本浏览器或webview中出现白屏,原因就是因为语法兼容问题。根据vite官方文档描述,build.target默认支持 Chrome >=87、Firefox >=78、Safari >=14、Edge >=88 传送,所以需要我们手动兼容低版本。
1.首先安装插件:npm i @vitejs/plugin-legacy -D 2.然后配置vite.config.js importlegacyPluginfrom'@vitejs/plugin-legacy';exportdefaultdefineConfig({plugins:[legacyPlugin({targets:['chrome 52'],// 需要兼容的目标列表,可以设置多个additionalLegacyPolyfills:['regenerator-runtime/runtime'],// 面向IE11...
Vite 默认会构建为 ESM,不支持 ESM 的浏览器将会出现兼容问题。 可尝试用这个插件解决:@vitejs/plugin-legacy import legacy from '@vitejs/plugin-legacy' export default { plugins: [ legacy({ polyfills: ['es.promise.finally', 'es/map', 'es/set'], modernPolyfills: ['es.promise.finally'] })...
问题1: 打包后,直接点击index.html 显示空白问题 vite.config.js配置, 如果是打包时,base值变为./, 没有这个属性,则配上 base:'./' 这样做还不显示,原因如下: image.png 所以我们需要全局安装一个http-server或者live-server ,这里我用的是: npm install live-server-g ...
当我们使用 Vite 进行开发时，会进行依赖预构建，即将第三方依赖进行打包，并在开发环境下使用这些打包过...
vite vue3 ios12白屏 vue加载白屏 项目中偶尔会遇到vue 第一次打开白屏现象,针对这个问题,找了不同环境下的处理方法,留个纪念 1,ios10 出现白屏 原因是由于ios 10中Safari中错误描述如下:当你定义一个与参数同名的for循环迭代变量时,我们错误地认为这是一个语法错误。解决方法如下:...
在vite+vue3项目中,执行build打包后生成index.html文件,【本地打开】或【线上服务器部署后】,页面空白且浏览器控制台很多报错,vue3使用vite进行打包构建后,在本地以file文件系统的方式,浏览器直接打开打包生成后的dist目录下的index.html文件访问,浏览器页面整页空白不显示且打开控制台后有报错,该路径找不到对应的...
访问路由空白无效果无报错;dev开发模式没问题,只存在build后通过服务打开页面存在问题。通过调试问题出在beforeEach代码: {代码...} 以上代码改成下面就可以访问了: {代码...} 路由使用 createWebHashHistory...