在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" /> <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, ''); } } } } }})有补充或错误的地方，请多多指教！！！
本文转载自: https://blog.csdn.net/weixin_69890748/article/details/138078993
版权归原作者 大白592 所有， 如有侵权，请联系我们删除。
版权归原作者 大白592 所有， 如有侵权，请联系我们删除。