使用vite發(fā)布app存在的所有問題解決方法

更新時間：2023年06月26日 11:42:46 作者：longda0_o

最近項目中使用了vue3+vite開發(fā)一個App項,下面這篇文章主要給大家介紹了關于使用vite發(fā)布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()
          }
        }, 
        // 用于從入口點創(chuàng)建的塊的打包輸出格式[name]表示文件名,[hash]表示該文件內(nèi)容hash值
        entryFileNames: 'js/[name].[hash].js', 
        // 用于命名代碼拆分時創(chuàng)建的共享塊的輸出命名
        chunkFileNames: 'js/[name].[hash].js', 
        // 用于輸出靜態(tài)資源的命名，[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`;
        // },
      }
    }
  }

這樣就已經(jīng)完成了拆分css和js等文件

2.這邊還需要加一下vite的版本問題，不然后續(xù)打包的app，在android或者iOS下載打開可能是白屏的

一、問題

在使用vue3.2和vite2.0+開發(fā)一個移動端H5，測試時發(fā)現(xiàn)很多低版本的安卓手機瀏覽器出現(xiàn)白屏的現(xiàn)象，而ios機型基本上是好的，原因是很多低版本瀏覽器并不支持原生ESM導入的方式，下面給出解決方案：

二、兼容原生ESM的瀏覽器

默認情況下，Vite 的目標瀏覽器是指能夠支持原生 ESM script 標簽和支持原生 ESM 動態(tài)導入的。作為參考，Vite 使用這個 browserslist 作為查詢標準：

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

三、解決方案

步驟一： vite.config.ts里 build.target 配置項指定構(gòu)建目標為 es2015 步驟二：通過插件 @vitejs/plugin-legacy 來自動生成傳統(tǒng)瀏覽器的 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'
 }
});