Vue3+Vite+Vuestic项目Dev正常，Build后生产环境白屏求助

项目概述 #

基于Vue3、Vite和Vuestic UI开发PDF生成应用，引入多类PDF相关npm包。开发环境运行正常，但生产构建后出现白屏、兼容性报错等问题，无法交付。

package.json配置 #

{
  "name": "receipt-generator",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173",
    "test:unit": "vitest --environment jsdom",
    "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'",
    "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'"
  },
  "dependencies": {
    "jspdf": "^2.5.1",
    "lodash": "^4.17.21",
    "maska": "^1.5.0",
    "material-design-icons": "^3.0.1",
    "mitt": "^3.0.0",
    "moment": "^2.29.4",
    "msplit": "^0.1.24",
    "pdfjs": "^2.4.7",
    "pdfjs-dist": "^3.0.279",
    "pinia": "^2.0.21",
    "print-js": "^1.6.0",
    "simple-vue-camera": "^1.1.2",
    "splitpanes": "^3.1.5",
    "vite-plugin-require": "^1.0.5",
    "vue": "^3.2.38",
    "vue-camera-lib": "^1.0.3",
    "vue-multipane": "^0.9.5",
    "vue-pdf": "^4.3.0",
    "vue-resize-split-pane": "^0.1.5",
    "vue-router": "^4.1.5",
    "vue-the-mask": "^0.11.1",
    "vue-web-cam": "^1.9.0",
    "vuestic-ui": "^1.4.13"
  },
  "devDependencies": {
    "@types/splitpanes": "^2.2.1",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vitejs/plugin-vue-jsx": "^2.0.1",
    "@vue/test-utils": "^2.0.2",
    "cypress": "^10.7.0",
    "jsdom": "^20.0.0",
    "start-server-and-test": "^1.14.0",
    "vite": "^3.0.9",
    "vitest": "^0.23.0"
  }
}

vite.config.js配置 #

import { fileURLToPath, URL } from 'node:url';

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

export default defineConfig({
  build: {
    hunkSizeWarningLimit: '2048 KiB',
  },
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  define: {
    'process.env': {},
  },
  server: { host: true },
  base: '',
});

控制台错误 #

报错核心为jsPDF与Vite的兼容性问题：

console.js:22 jsPDF PubSub Error Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at http://localhost:5174/node_modules/.vite/deps/jspdf.js?v=c100f81e:8314:55
    at Object.<anonymous> (http://localhost:5174/node_modules/.vite/deps/jspdf.js?v=c100f81e:8315:8)
    at C.publish (http://localhost:5174/node_modules/.vite/deps/jspdf.js?v=c100f81e:1280:17)
    at Object.Pe (http://localhost:5174/node_modules/.vite/deps/jspdf.js?v=c100f81e:1852:16)
    at E.y2.addFont (http://localhost:5174/node_modules/.vite/deps/jspdf.js?v=c100f81e:2421:179)
    at generatePdf (http://localhost:5174/src/components/PdfView.vue:98:7)
    at http://localhost:5174/src/components/PdfView.vue:1081:3
    at http://localhost:5174/node_modules/.vite/deps/chunk-AO42RC3Y.js?v=c100f81e:5637:154
    at callWithErrorHandling (http://localhost:5174/node_modules/.vite/deps/chunk-AO42RC3Y.js?v=c100f81e:156:18)
    at callWithAsyncErrorHandling (http://localhost:5174/node_modules/.vite/deps/chunk-AO42RC3Y.js?v=c100f81e:164:17)

生产构建警告 #

1. CSS语法错误警告：

▲ [WARNING] Expected ";" [css-syntax-error]

    <stdin>:140:24:
      140 │ @apply px-2 py-2 sm:py-0
          │                         ^
          ╵                         ;

2. 代码块体积过大警告：

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

检查分析 #

页面根元素仅含空注释，无任何渲染内容：

<div id="app" data-v-app="">
  <!---->
</div>

已尝试方案 #

通过在vite.config.js中添加base: ''解决了Vite生产环境静态路径问题，但白屏问题仍存在，dist文件夹构建过程无报错。

解决方案建议 #

1. 修复jsPDF的atob编码错误 #

• 清理冗余依赖：同时存在pdfjs、pdfjs-dist、vue-pdf，版本冲突风险高，保留pdfjs-dist和vue-pdf，卸载其余两个。
• 调整字体加载方式：避免直接使用Base64编码字体，改用jsPDF官方推荐的字体引入方案。
• 优化Vite依赖配置：在vite.config.js中添加：

  optimizeDeps: {
    include: ['jspdf'],
    exclude: ['pdfjs-dist']
  }
  

2. 解决生产白屏问题 #

• 捕获挂载错误：在main.js中添加错误捕获逻辑，定位初始化失败原因：

  createApp(App)
    .use(router)
    .use(pinia)
    .use(VuesticUI)
    .mount('#app')
    .catch(err => console.error('App mount error:', err))
  

• 开启构建SourceMap：在vite.config.js的build字段中添加sourcemap: true，构建后通过开发者工具定位未渲染的具体代码位置。
• 校验路由配置：确保生产环境路由模式与部署环境匹配，若部署在子路径，同步调整base值与路由base参数。

3. 修复CSS语法警告 #

• 移除@apply语法：项目未配置Tailwind CSS，直接替换为原生CSS或Vuestic UI内置类名。
• 如需使用Tailwind，完整配置Tailwind CSS到Vite项目中。

4. 优化代码块体积 #

在vite.config.js的build字段中配置手动分包：

rollupOptions: {
  output: {
    manualChunks: {
      'vue-vendor': ['vue', 'vue-router', 'pinia'],
      'pdf-vendor': ['jspdf', 'pdfjs-dist', 'vue-pdf'],
      'ui-vendor': ['vuestic-ui']
    }
  }
}

内容的提问来源于stack exchange，提问作者Muhammad Siddiqui