使用vite发布app存在的所有问题

原创已于 2023-03-08 17:33:57 修改 · 2.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2023-03-08 15:48:48 首次发布

文章讲述了在使用Vue3.2和Vite2.0开发H5时遇到的低版本安卓浏览器白屏问题。解决方案包括在vite.config.ts中配置build.target为es2015，以及引入@vitejs/plugin-legacy插件以生成传统浏览器兼容的chunk和polyfill。此外，还介绍了Vite打包后dist文件不能在浏览器直接打开的问题，推荐使用http-server启动服务，以及在HBuilderX中发布APP的步骤。

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

1.打包项目的时候，dist里的css和js等文件都在assets,没分css和js文件，需要在vite.config.ts配置。

build: {
    rollupOptions: {
      output: {
        // 最小化拆分包
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }, 
        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        entryFileNames: 'js/[name].[hash].js', 
        // 用于命名代码拆分时创建的共享块的输出命名
        chunkFileNames: 'js/[name].[hash].js', 
        // 用于输出静态资源的命名，[ext]表示文件扩展名
        assetFileNames: '[ext]/[name].[hash].[ext]' 
        // 拆分js到模块文件夹 
        // chunkFileNames: (chunkInfo) => {
        //     const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
        //     const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
        //     return `js/${fileName}/[name].[hash].js`;
        // },
      }
    }
  }

这样就已经完成了拆分css和js等文件

2.这边还需要加一下vite的版本问题，不然后续打包的app，在android或者iOS下载打开可能是白屏的

一、问题

在使用vue3.2和vite2.0+开发一个移动端H5，测试时发现很多低版本的安卓手机浏览器出现白屏的现象，而ios机型基本上是好的，原因是很多低版本浏览器并不支持原生ESM导入的方式，下面给出解决方案：

二、兼容原生ESM的浏览器

默认情况下，Vite 的目标浏览器是指能够 支持原生 ESM script 标签 和 支持原生 ESM 动态导入 的。作为参考，Vite 使用这个 browserslist 作为查询标准：

Chrome >=87
Firefox >=78
Safari >=13
Edge >=88

三、解决方案
步骤一： vite.config.ts里 build.target 配置项指定构建目标为 es2015

步骤二：通过插件 @vitejs/plugin-legacy 来自动生成传统浏览器的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。

1、安装@vitejs/plugin-legacy

npm i @vitejs/plugin-legacy

2.配置 vite.config.ts

 
import legacy from "@vitejs/plugin-legacy";

 
export default defineConfig({
  plugins = [
   vue(),
  legacy({
    targets: [
      "> 1%, last 1 version, ie >= 11",
      "safari >= 10",
      "Android > 39",
      "Chrome >= 60",
      "Safari >= 10.1",
      "iOS >= 10.3",
      "Firefox >= 54",
      "Edge >= 15"
    ],
    additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
    polyfills: ["es.promise.finally", "es/map", "es/set"],
    modernPolyfills: ["es.promise.finally"]
  })
];
 
  build: {
    target: 'es2015'
 }
    
});