Subscribe on changes!

发现用vite创建项目后在手机真机调试访问显示白屏的bug

avatar
Jul 10th 2022

Vue version

vue3

Link to minimal reproduction

https://sfc.vuejs.org/#eNpNUdFKAkEU/ZVhXiyq3fdtFfqB6AP2ZbMxV9zZYWZURAQNQjStIKgEISwffEmpKMQsPyZn1Kd+oVlnJS8Dc+/MuYdz7i3BA0KMfA5BC9oc+STrcpRwMFBhn3j5hDj/mH3ezqZdWR3+VM70sc3wS6MIoizAwMOpwCqVdGUwt7i1XS472DY3SFXJktQjHDDEcyQiSGZdxsCRpinptzCw6yMQBzG/eKiy2L5pgsW0veg2xaQiroe/k6bo9D2SDjCadx5kZzwbNRaD6fJuIO+/573xvP0lXq4UTL71l7WGvKzrdll9FL2WfH4So5HyIgZ10brRDPK1K98vFtNaqHWtY+VlU1gYVBmgGMQi9wpjxcAO4GmPGaHw/X+4mkJ06SSL+HpocYBRIbK+ta16bFMPaDUsuAs9nwSU7/kuMTIKo5a00uFEH8yB1lqZA9UWw9qBac4Js0yTpZLhajPMCOipqTKD5jD3fGQg5u8d06DAEFXEDgwplMAyLP8BTS/Zkg==

Steps to reproduce

用vite命令创建h5项目 yarn create vite my-h5-app --template vue 在随便哪个能写js的地方,比如app.vue 或main.js 添加如下代码,运行后pc显示正常,iphone真机上访问显示白屏 但是打包后再运行还是正常的

<template>
    <div>其他信息。。。</div>
    person info:{{person.say()}}
</template>

<script setup>
    class Person {
        name = 'myName';// 这行开启,在iphone真机上访问显示白屏,注释掉这行恢复正常。安卓真机没测过

        say() {
            return 'person say:' + this.name;
        }
    }

    let person = new Person();
</script>

用vue-cli命令创建的项目 vue create my-h5-app,没这问题

What is expected?

手机真机访问不应该出现白屏

What is actually happening?

手机真机无法访问,出现白屏,安卓真机没测试过。 iphone真机的safari和chrome浏览器访问都白屏

System Info

No response

Any additional comments?

No response

avatar
Jul 12th 2022

你手机系统和浏览器的版本都不提供,这是想让别人怎么帮你呢? Vite 打包默认目标要求:https://caniuse.com/es6-module-dynamic-import 想支持更旧的浏览器需要用 @vitejs/plugin-legacy

还有,Vite 是 Vite,Vue 是 Vue,这个仓库只处理 Vue 本身的问题。

avatar
Jul 16th 2022

你手机系统和浏览器的版本都不提供,这是想让别人怎么帮你呢? Vite 打包默认目标要求:https://caniuse.com/es6-module-dynamic-import 想支持更旧的浏览器需要用 @vitejs/plugin-legacy

还有,Vite 是 Vite,Vue 是 Vue,这个仓库只处理 Vue 本身的问题。

IOS13.7 13.6 14.7.1 都测过 safari chrome firefox都有,你还需要什么版本? 实际上根本不需要版本,自己随便找个真机测试一下就会发现有问题,如果没发现我说的这个问题,再上来问什么版本

avatar
Jul 16th 2022

如果你能在原始 issue 里提过你补充描述的信息,或者好好说话,那么你更有可能得到帮助。