Swiper4 is introduced into vue in import mode to show the problem that files can not be found on Huawei mobile phone.

it is normal to import, PC and WeChat in the .vue file after installing swiper through npm. However, when I went to Huawei"s native browser, I found that the page was blank. After commenting out the sentence of import swiper, the page came out normally. Later, it was introduced in the way of cdn. At the same time, webpack"s external was configured and displayed normally on Huawei"s native browser. What is the reason?
system version MEUI4.0.2
Android version 6.0
swiper ^ 4.4.6

Apr.18,2022

after testing, it is found that the previous reference to swiper in the .vue file is using import Swiper from 'swiper'; , and then the actual reference is node_module/swiper/dist/js/swiper.esm.bundle.js, and the Use of const in strict mode is reported in Huawei browser. The cause of this error is not clear for the time being. At present, there are two ways to fix it:
1. Modify the statement that introduces swiper. Do not write import Swiper from 'swiper'; and change it to import Swiper from' swiper/dist/js/swiper.js'.
2. Introduce swiper by using cdn, because there is a carousel on the first page of my wap, so in the end, I introduced it with cdn, which saves packaging, and on the other hand, I can rely on cdn cache to speed up the next load. After introducing cdn, I need to configure external of webpack


may be a problem of code compilation. Introduce eruda as a debugging tool to see if there is anything wrong on Huawei's mobile phone.

Menu