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

我叫安琪拉 · 发表于 2024-7-5 23:05:34

在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>  <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>

复制代码

在这个修改后的版本中，我使用了一个立即执行的函数表达式（IIFE）来确保代码在全局作用域中执行，并且使用了 [code]Object.defineProperty

复制代码

来更安全地定义

globalThis

复制代码

属性。这样，即使在不支持

globalThis

复制代码

的环境中，代码也能正常工作，并且不会意外地覆盖任何已存在的全局变量。[/code]
在项目中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打包页面加载空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/323338t0n.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！