H5项目集成到飞书，ios正常显示，安卓无法显示页面

本文链接：https://blog.csdn.net/yang_song97/article/details/130408849

文章介绍了在手机端无法查看日志时，如何使用v-console插件进行调试。作者通过排除法确定问题可能出在飞书对ES6语法的不兼容。在vite.config.ts中将构建目标改为es2015，解决了页面无法打开的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、由于手机端没办法看到日志，我们需要借助插件来查看，这里借助v-console插件

1、先安装

npm install v-console

2、在main.ts中配置

// 生产环境移除VConsole
if (import.meta.env.MODE !== "production") {
  import("vconsole").then(({ default: VConsole }) => {
    new VConsole();
  });
}

二、问题分析

开始怀疑是语法和接口有报错，导致页面无法打开，在测试环境打开后发现日志没有任何报错，后面直接在index.html页面把script注释掉，随便写些内容，在发布后发现可以正常显示，到这里可能觉得是飞书不兼容es6语法

三、改写

在vite.config.ts中

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";
import vueJsx from "@vitejs/plugin-vue-jsx";
import * as path from "path";

const resolve = (p: string) => {
  return path.resolve(__dirname, p);
};

export default defineConfig({
  resolve: {
    alias: {
      "@": resolve("./src"),
    },
  },
// 主要是这里，默认是esNext，改为es2015
  build: {
    target: "es2015",
  },
  plugins: [
    vueJsx(),
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
});