uniapp运行在手机模拟器上时出现“白屏”问题

Question

uniapp运行在手机模拟器上时出现“白屏”问题，报错代码如下：
reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught TypeError: Cannot read property 'lib' of undefined
我在HBuilderX中引入了lib-flexible+rem来解决移动端适配问题，运行在浏览器上时不会报错，并且可以正常适配（vue2），但是在手机上“白屏”;然后改为vue3后手机上可以显示，但是rem不适用了，不能适配屏幕。

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

这个问题的报错信息提示了在创建实例上下文时，出现了白屏问题，可能的原因是无法读取undefined的lib属性。 解决方案如下：

1. 检查是否正确引入了lib-flexible库，并确认手机模拟器上是否已安装。可以选择通过插件安装的方式，在HBuilderX中安装lib-flexible。
2. 检查引用的lib-flexible版本是否与uniapp的版本兼容。
3. 如果使用的是vue2版本，在main.js中加入下列代码，以解决rem单位不适用的问题：

import '@/common/js/rem.js';

其中，rem.js为下列代码：

(function (doc, win) { 
    var docEl = doc.documentElement, 
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 
    recalc = function () { 
        var clientWidth = docEl.clientWidth; 
        if (!clientWidth) return; 
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 
        }; 
        if (!doc.addEventListener) return; 
        win.addEventListener(resizeEvt, recalc, false); 
        doc.addEventListener('DOMContentLoaded', recalc, false); 
    })(document, window);

1. 如果使用的是vue3版本，则可以使用postcss-pxtorem插件解决rem适配问题。 需要在项目中安装postcss-pxtorem，并在vue.config.js中进行配置，如下所示：

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({
                        rootValue: 37.5, // 换算的基数，根据设计稿的尺寸来设置，rem基准值。
                        propList: ['*'],
                    })
                ]
            }
        }
    }
}

这样就可以使用rem单位进行适配了。