首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vite发布app问题

使用vite发布app存在的所有问题解决方法

2023-06-26 11:40:41 作者：longda0_o

最近项目中使用了vue3+vite开发一个App项,下面这篇文章主要给大家介绍了关于使用vite发布app存在的所有问题的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

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'
 }
});