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

在vue3编写时,遇到这样的一个问题:
移动端混合开发中,本地浏览器正常运行,但是vite打包后,手机版本相对低的时候,会出现h5页面空白情况,经过多方面百度,找到了相对应的添加配置才正常,如下:
 

  1. 在项目中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" />
        <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 的环境中,代码也能正常工作,并且不会意外地覆盖任何已存在的全局变量。

  2. 在项目中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, '');
                }
              }
            }
          }
        }
    })
    

    有补充或错误的地方,请多多指教!!!

  • 15
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值