uni-app Vite + Vue3 + TS 新项目 ios真机调试白屏，安卓和浏览器都没问题

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app Vite + Vue3 + TS 新项目 ios真机调试白屏，安卓和浏览器都没问题

开发环境 版本号 项目创建方式
HBuilder - h5+项目

构建的新项目，Vite + Vue3 + TS 就加了个 base: ‘./’, 用HBuilder新建的h5+项目替换的assets和index.vue进行的打包，打包出来安卓调试没问题能正常显示，运行浏览器也行，就是iOS调试白屏，没有任何报错，我改用之前vue2的项目进去就能显示。

Harmonyos Next教程
1 回复

针对你提到的uni-app结合Vite、Vue3和TypeScript的新项目在iOS真机调试时出现白屏的问题，而安卓和浏览器都表现正常，这通常可能是由于iOS特定的兼容性问题或者配置不当引起的。以下是一些可能的原因和对应的代码检查与调整方案，不涉及具体建议，仅提供代码示例和排查思路。

1. 检查manifest.json配置

确保manifest.json中关于iOS平台的配置是正确的。特别是app-plus下的配置，比如distribute、sdkConfigs等是否与iOS平台兼容。

{
  "mp-weixin": {},
  "app-plus": {
    "distribute": {
      "apple": {
        // iOS相关配置
      }
    },
    "sdkConfigs": {}
  }
}

2. Vite + TypeScript 配置

检查vite.config.ts和tsconfig.json，确保TypeScript编译输出与Vite的打包配置兼容iOS。特别是检查target和module的设置。

vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    target: 'esnext', // 或尝试设置为 'es2015' 等更低版本
    minify: 'terser',
    outDir: 'dist',
    assetsDir: 'assets',
    assetsInlineLimit: 4096,
    rollupOptions: {
      // 确保output配置兼容iOS
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[extname]/[name]-[hash].[extname]',
      },
    },
  },
});

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext", // 或尝试设置为 'ES5', 'ES2015' 等
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

3. 条件编译

检查代码中是否有使用条件编译导致iOS特定代码未被正确执行。uni-app支持条件编译，通过#ifdef APP-PLUS-IOS等指令可以针对iOS平台编写特定代码。

<template>
  <view>
    #ifdef APP-PLUS-IOS
      <text>iOS Specific Code</text>
    #else
      <text>Other Platform Code</text>
    #endif
  </view>
</template>

4. 依赖和插件

确保所有依赖和插件都是最新的，并且与iOS兼容。特别是与Webview相关的插件或依赖，可能需要特别注意。

如果以上检查后问题依旧存在，建议查看uni-app和Vite的官方文档或社区，看看是否有其他开发者遇到并解决了类似的问题。

回到顶部