vue3+vite+移動端webview打包后頁面加載空白問題解決辦法

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

這篇文章主要給大家介紹了關(guān)于vue3+vite+移動端webview打包后頁面加載空白問題的解決辦法,文中通過代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下

在vue3編寫時，遇到這樣的一個問題：

移動端混合開發(fā)中，本地瀏覽器正常運行，但是vite打包后，手機版本相對低的時候，會出現(xiàn)h5頁面空白情況，經(jīng)過多方面百度，找到了相對應(yīng)的添加配置才正常，如下：

在項目中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" />
    <!-- 開啟頂部安全區(qū)適配 -->
    <van-nav-bar safe-area-inset-top></van-nav-bar>
    <!-- 開啟底部安全區(qū)適配 -->
    <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 值，無論在哪個上下文中執(zhí)行代碼。在瀏覽器環(huán)境中，它通常等同于 window 對象；在Node.js環(huán)境中，它等同于 global 對象；在Web Workers中，它則是那個worker的全局對象。

這段代碼是為了確保在低版本的手機瀏覽器中，即使原生不支持 globalThis，也能通過這段代碼來模擬它。

另外，考慮到代碼健壯性和可讀性，通常不建議直接在全局作用域中定義變量或修改全局對象，除非絕對必要。不過，由于 globalThis 是一個標準規(guī)范，所以這里是一個例外。

下面是修改后的代碼示例，它更有可能按預(yù)期工作：

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

在這個修改后的版本中，我使用了一個立即執(zhí)行的函數(shù)表達式（IIFE）來確保代碼在全局作用域中執(zhí)行，并且使用了 Object.defineProperty 來更安全地定義 globalThis 屬性。這樣，即使在不支持 globalThis 的環(huán)境中，代碼也能正常工作，并且不會意外地覆蓋任何已存在的全局變量。

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

legacyPlugin({
    targets:['defaults', 'not IE 11']
    // targets:['chrome 52'],  // 需要兼容的目標列表，可以設(shè)置多個
    // additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11時需要此插件
 }),
 esbuild({
 //替換成你想要的谷歌內(nèi)核版本
     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('當前環(huán)境變量:',env,'當前運行模式:',mode)
  return {
      base:'/worker/mb/v1/',
      plugins: [
        vue(),
        legacyPlugin({
          targets:['defaults', 'not IE 11']
          // targets:['chrome 52'],  // 需要兼容的目標列表，可以設(shè)置多個
          // additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11時需要此插件
        }),
        esbuild({
          //替換成你想要的谷歌內(nèi)核版本
          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, '');
            }
          }
        }
      }
    }
})

總結(jié)

到此這篇關(guān)于vue3+vite+移動端webview打包后頁面加載空白問題解決辦法的文章就介紹到這了,更多相關(guān)vue3+vite+移動端webview打包頁面加載空白內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: