首页 > 其他分享 >vue+vite项目在浏览器运行正常,在钉钉白屏报错,在嵌入的app里面白屏报错

vue+vite项目在浏览器运行正常,在钉钉白屏报错,在嵌入的app里面白屏报错

时间:2023-07-13 14:55:06浏览次数:48  
标签:vue 浏览器 报错 globalThis 白屏 esbuild vite

1.在钉钉直接打开本地跑的项目白屏并且报错

Uncaught ReferenceError: globalThis is not defined
/@vite/client:135:7 ReferenceError: globalThis is not defined
at http://192.168.20.36:5173/@vite/client:135:7


Uncaught SyntaxError: Unexpected token .
/src/main.ts:19:38 SyntaxError: Unexpected token .

第一个问题

vue3 运行报错:Uncaught ReferenceError: globalThis is not defined

原因:

globalThis旨在通过定义一个标准的全局属性来整合日益分散的访问全局对象的方法。该提案目前处于第四阶段,这意味着它已经准备好被纳入ES2020标准。所有流行的浏览器,包括Chrome 71+、Firefox 65+和Safari 12.1+,都已经支持这项功能。你也可以在Node.js 12+中使用它。

解决方案:

方案1:
可以通过升级node版本和浏览器版本解决,node> 12,chrome版本>71。(我试了好像没啥用)

方案2:
在index.html中

<script>
  this.globalThis || (this.globalThis = this);
</script>
亲测,方案二可行   第二个问题 逐行定位,最终?.可链式操作符报错 安装rollup-plugin-esbuild npm i rollup-plugin-esbuild -d 在vite.config.ts里面写 import esbuild from 'rollup-plugin-esbuild' esbuild({         //替换成你想要的谷歌内核版本           target: 'chrome64',           loaders: {             '.vue': 'js',             '.ts': 'js'           }  }),

 

 出现这种报错,也是因为?.

 

 

在嵌入的app运行本地项目报错

也是因为?.

 

在安卓端运行线上项目报错白屏

 

 

 

问题原因:
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

import legacyPlugin from '@vitejs/plugin-legacy';
export default defineConfig({
plugins: [
legacyPlugin({
targets: ['chrome 52'], // 需要兼容的目标列表,可以设置多个
additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11时需要此插件
}),
]
})

重新打包、运行到浏览器,则低浏览器不会报错了

拓展:Uncaught Syntaxerror: Unexpected token >
其实这个问题很多都是因为我们的代码版本较高导致了,这里因为是vite项目所以使用这种解决办法,如果你这边的vue2项目,或者是react项目,那么可以使用babel-polyfill。具体的步骤可以搜索一下,大差不差

 

标签:vue,浏览器,报错,globalThis,白屏,esbuild,vite
From: https://www.cnblogs.com/guodadan/p/17550463.html

相关文章

  • vue 模糊查询
    html代码<divid="root"><h3>人员列表</h3><inputtype="text"placeholder="请输入名字"v-model="keyWord"><ul><liv-for="(p,index)offilPersons"......
  • vue - 点击按钮上传文件功能的实现
    methods:{//点击调用上传方法asynchandleUpload(row){try{letfileList=awaitthis.getFile("",true);//参数1:选取文件类型如.pdf、.png、.doc文件,参数2、是否多选console.log(fileList);//上传文件可在此处进行}catch......
  • 解决redis hash序列化报错的具体操作步骤
    RedisHash序列化报错的解决方法1.问题背景在使用Redis时,有时候会遇到Hash序列化报错的问题。这种问题通常是由于Redis中存储的数据类型与操作的数据类型不一致导致的。在下面的文章中,我将为你详细介绍解决这个问题的步骤和相应的代码示例。2.解决步骤步骤操作1.查......
  • Vue 学习 Day2
    摘要:动态属性的限制当使用DOM内嵌模板(直接写在HTML文件里的模板)时,我们需要避免在名称中使用大写字母,因为浏览器会强制将其转换为小写: <a:[someAttr]="value">...</a> “someAttr”属性而非“someattr”,这段代码将不会  ......
  • vue3核心概念-Mutation-辅助函数
    你可以在组件中使用 this.$store.commit('xxx') 提交mutation,或者使用 mapMutations 辅助函数将组件中的methods映射为 store.commit 调用(需要在根节点注入 store)辅助函数只能在选项式API中使用<template><h3>Nums</h3><p>{{getCount}}</p><inputtype="......
  • Vue实现在线编辑excel、导入、导出(转)
    原文:https://www.baidu.com/link?url=AuyjwtPhSkYFpr8dpb-mdYLpniwQhc7URksdLNktJ-dFgYmR4eEv3VpuTWxEH1p37BdTjfnva4iKCX8_pZx4BgFMyFjgxtMT95FLe5N02vi&wd=&eqid=dc455e22000331bf0000000664af71c1概要Vue实现在线编辑excel、导入、导出整体架构流程luckysheet文档地址exceljs文......
  • Vue聊天界面请求AzureOpenAI
    Vue工程目录: <scriptsetup>import{ref}from"vue";importaxiosfrom"axios";importMarkdownItfrom"markdown-it";importhljsfrom"highlight.js";constlist=ref([]);constquestion=ref(""......
  • Error response from daemon:connect: no route to host——客户端远程登录私有仓库报
    报错:[root@client~]#dockerlogin-uadmin-pHarbor12345http://192.168.11.131WARNING!Using--passwordviatheCLIisinsecure.Use--password-stdin.Errorresponsefromdaemon:Gethttps://192.168.11.131/v2/:dialtcp192.168.11.131:443:connect:norout......
  • IIS部署createWebHistory路由模式的Vue项目
    接口使用NetCore,前端使用Vue3.+网站部署目录如下api(虚拟应用程序)webindex.html需要在服务器上按照URLRewrite下载地址:https://www.iis.net/downloads/microsoft/url-rewrite安装后在网站根目录下创建“web.config”文件,内容如下<?xmlversion="1.0"encoding="UTF-8"?......
  • vue 适配
    vue适配1.amfe-flexibleamfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。2.postcss-pxtorempostcss-pxtorem是postcss的插件,用于将像素单元生成rem单位。先安装amfe-flexible和postcss-pxtoremnpminstallamfe-flexible--savenpminstallpostcss-pxto......