快捷導(dǎo)航

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

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

最近項(xiàng)目中使用了vue3+vite開(kāi)發(fā)一個(gè)App項(xiàng),下面這篇文章主要給大家介紹了關(guān)于使用vite發(fā)布app存在的所有問(wèn)題的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1.打包項(xiàng)目的時(shí)候，dist里的css和js等文件都在assets,沒(méi)分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()
          }
        }, 
        // 用于從入口點(diǎn)創(chuàng)建的塊的打包輸出格式[name]表示文件名,[hash]表示該文件內(nèi)容hash值
        entryFileNames: 'js/[name].[hash].js', 
        // 用于命名代碼拆分時(shí)創(chuàng)建的共享塊的輸出命名
        chunkFileNames: 'js/[name].[hash].js', 
        // 用于輸出靜態(tài)資源的命名，[ext]表示文件擴(kuò)展名
        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的版本問(wèn)題，不然后續(xù)打包的app，在android或者iOS下載打開(kāi)可能是白屏的

一、問(wèn)題

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

二、兼容原生ESM的瀏覽器

默認(rèn)情況下，Vite 的目標(biāo)瀏覽器是指能夠支持原生 ESM script 標(biāo)簽和支持原生 ESM 動(dòng)態(tài)導(dǎo)入的。作為參考，Vite 使用這個(gè) browserslist 作為查詢(xún)標(biāo)準(zhǔn)：

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

三、解決方案

步驟一： vite.config.ts里 build.target 配置項(xiàng) 指定構(gòu)建目標(biāo)為 es2015 步驟二：通過(guò)插件 @vitejs/plugin-legacy 來(lái)自動(dòng)生成傳統(tǒng)瀏覽器的 chunk 及與其相對(duì)應(yīng) ES 語(yǔ)言特性方面的 polyfill。兼容版的 chunk 只會(huì)在不支持原生 ESM 的瀏覽器中進(jìn)行按需加載。

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