vue3+vite+移动端webview打包后页面加载空白问题解决办法

更新时间：2024年06月27日 08:26:25 作者：大白592

这篇文章主要给大家介绍了关于vue3+vite+移动端webview打包后页面加载空白问题的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下

在vue3编写时，遇到这样的一个问题：

移动端混合开发中，本地浏览器正常运行，但是vite打包后，手机版本相对低的时候，会出现h5页面空白情况，经过多方面百度，找到了相对应的添加配置才正常，如下：

在项目中index.html中添加：

<script>
// 兼容es6 不加这行手机版本太低打包后好多方法无法生效
this.globalThis || (this.globalThis = this)
</script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" rel="external nofollow"  />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <!-- 开启顶部安全区适配 -->
    <van-nav-bar safe-area-inset-top></van-nav-bar>
    <!-- 开启底部安全区适配 -->
    <van-number-keyboard safe-area-inset-bottom ></van-number-keyboard>
    <!-- <title></title> -->
    <script>
      // 兼容es6 不加这行手机版本太低打包后好多方法无法生效
      this.globalThis || (this.globalThis = this)
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

原因：

尝试定义一个全局对象 globalThis，这是ES2020中引入的一个新特性，它提供了一个标准的方式来访问全局 this 值，无论在哪个上下文中执行代码。在浏览器环境中，它通常等同于 window 对象；在Node.js环境中，它等同于 global 对象；在Web Workers中，它则是那个worker的全局对象。

这段代码是为了确保在低版本的手机浏览器中，即使原生不支持 globalThis，也能通过这段代码来模拟它。

另外，考虑到代码健壮性和可读性，通常不建议直接在全局作用域中定义变量或修改全局对象，除非绝对必要。不过，由于 globalThis 是一个标准规范，所以这里是一个例外。

下面是修改后的代码示例，它更有可能按预期工作：

<script>  
  // 兼容不支持原生globalThis的环境  
  (function() {  
    if (typeof globalThis === 'undefined') {  
      Object.defineProperty(this, 'globalThis', {  
        value: this,  
        writable: false,  
        enumerable: false,  
        configurable: false  
      });  
    }  
  })();  
</script>  
  
<!-- 之后的代码可以使用globalThis了 -->

在这个修改后的版本中，我使用了一个立即执行的函数表达式（IIFE）来确保代码在全局作用域中执行，并且使用了 Object.defineProperty 来更安全地定义 globalThis 属性。这样，即使在不支持 globalThis 的环境中，代码也能正常工作，并且不会意外地覆盖任何已存在的全局变量。

在项目中vite.config.ts中添加：

legacyPlugin({
    targets:['defaults', 'not IE 11']
    // targets:['chrome 52'],  // 需要兼容的目标列表，可以设置多个
    // additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11时需要此插件
 }),
 esbuild({
 //替换成你想要的谷歌内核版本
     target: ['chrome52','chrome64'],
     loaders: {
        '.vue': 'js',
         '.ts': 'js'
          }
    }),

import { defineConfig ,loadEnv  } from 'vite'
import vue from '@vitejs/plugin-vue'
import esbuild from 'rollup-plugin-esbuild'
import legacyPlugin from '@vitejs/plugin-legacy'
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import { resolve } from 'path'
const port = 6688 //端口

export default defineConfig(({command, mode }) => {
  const env = loadEnv(mode, process.cwd())
  console.log('当前环境变量:',env,'当前运行模式:',mode)
  return {
      base:'/worker/mb/v1/',
      plugins: [
        vue(),
        legacyPlugin({
          targets:['defaults', 'not IE 11']
          // targets:['chrome 52'],  // 需要兼容的目标列表，可以设置多个
          // additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11时需要此插件
        }),
        esbuild({
          //替换成你想要的谷歌内核版本
          target: ['chrome52','chrome64'],
          loaders: {
            '.vue': 'js',
            '.ts': 'js'
          }
        }),
        Components({
          resolvers: [VantResolver()],
        }),
      ],
      resolve:{
        alias:{
          '@': resolve(__dirname, 'src'),
        }
      },
      css: {
        preprocessorOptions: {
          less: {
            charset:false,
            additionalData: '@import "./src/style/global.less";'
          }
        }
      },
      server:{
        port:port,
        host:env.VITE_APP_BASE_host,
        proxy:{
          [env.VITE_APP_BASE_API]:{
            target: env.VITE_APP_BASE_url,
            changeOrigin: true,//是否跨域
            ws: true,
            rewrite: (path) => {
              const regExp = new RegExp(`^\\/${env.VITE_APP_BASE_API}`);
              return path.replace(regExp, '');
            }
          }
        }
      }
    }
})

总结

到此这篇关于vue3+vite+移动端webview打包后页面加载空白问题解决办法的文章就介绍到这了,更多相关vue3+vite+移动端webview打包页面加载空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Pycharm中开发vue element项目时eslint的安装和使用步骤
这篇文章主要介绍了Pycharm中开发vue element项目时eslint的安装和使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-05-05
elementUI实现下拉选项加多选框的示例代码
因产品需求和UI样式调整，本文主要实现elementUI下拉选项加多选框的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
Vue 中批量下载文件并打包的示例代码
本篇文章主要介绍了Vue 中批量下载文件并打包的示例代码，用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件，有兴趣的可以了解一下
2017-11-11
vue关于页面刷新的几个方式解读
这篇文章主要介绍了vue关于页面刷新的几个方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
Vue中请求本地JSON文件并返回数据的方法实例
在前端开发过程当中,当后台服务器开发数据还没完善,没法与咱们交接时,咱们习惯在本地写上一个json文件做模拟数据测试代码效果是否有问题,下面这篇文章主要给大家介绍了关于Vue中请求本地JSON文件并返回数据的相关资料,需要的朋友可以参考下
2022-08-08
vue中给el-radio添加tooltip并实现点击跳转方式
这篇文章主要介绍了vue中给el-radio添加tooltip并实现点击跳转方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题
这篇文章主要为大家介绍了解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Vue实现自动检测以及版本的更新
当用户在当前站点停留时间比较长，中途站点进行升级更新之后，用户如果不刷新页面就任然停留在旧的页面里，如何让用户收到一个提示，引导用户进行更新操作呢？下面给大家介绍如何站点更新如何在生产环境提示用户更新，进行页面刷新操作，核心原理其实很简单
2023-03-03
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
这篇文章主要介绍了vue-cli 脚手架基于Nightwatch的端到端测试环境的过程,需要的朋友可以参考下
2018-09-09
vue body的背景图片属性设置方式
在Vue中,背景图跨页面显示问题可通过生命周期钩子（如mounted和beforeDestroy）实现动态控制,确保仅在主页加载背景图,登录页等其他页面可移除,从而实现差异化样式应用
2025-08-08