Vue3.0以降 + Viteプロジェクトパッケージ化後の下位バージョンブラウザの互換性問題を解決

1. Vite が以前のバージョンのブラウザで実行すると問題が発生する

vite+vue3 プロジェクトの開発後、新しいバージョンのブラウザで実行すると正常に表示されますが、Chrome < 23、Firefox < 21、IE などの一部の古いブラウザで実行すると、表示が空白になり、エラーメッセージはありません。

2. ブラウザの互換性

運用環境用のビルド パッケージは、ターゲット ブラウザーが最新の JavaScript 構文をサポートしていることを前提としています。デフォルトでは、Vite のターゲット ブラウザはネイティブ ESM スクリプト タグをサポートし、ネイティブ ESM 動的インポートをサポートするブラウザです。参考までに、Vite はこのブラウザリストをクエリ基準として使用します。

• クロム >=87
• Firefox >=78
• サファリ >=13
• エッジ >=88

build.target 構成アイテムを使用してビルド ターゲットを指定することもできます。これは、少なくとも es2015 をサポートします。デフォルトでは、Vite は構文変換のみを処理し、デフォルトではポリフィルは含まれません。

3. 公式ソリューション: @vitejs/plugin-legacy プラグインを使用します

レガシーブラウザはプラグイン @vitejs/plugin-legacy を通じてサポートできます。

1)、プラグインをインストールします

pnpm i @vitejs/plugin-legacy -D
pnpm i  terser  -D

導入実績

2)、vite.config.jsで設定します

import path from 'path'
import {
    
     defineConfig } from 'vite'
import type {
    
     Plugin, PluginOption } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import legacy from '@vitejs/plugin-legacy'
import {
    
     ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {
    
     createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import WindiCSS from 'vite-plugin-windicss'
export default defineConfig(({
     
      mode, command }) => {
    
    
  const isBuild = command === 'build'   								 // 是否是打包环境的判断
  const plugins: (Plugin | Plugin[] | PluginOption[])[] = [
    vue(),
    WindiCSS(),
    AutoImport({
    
    
      resolvers: [ElementPlusResolver()],
    }),
    Components({
    
    
      resolvers: [ElementPlusResolver()],
      directoryAsNamespace: true,
    }),
    createSvgIconsPlugin({
    
    
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/svgicons')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
    }),
  ]
  isBuild && plugins.push(legacy())           //  是打包环境，就把legacy()加入到plugins中
  return {
    
    
    plugins,
    resolve: {
    
    
      alias: {
    
    
        '@': path.resolve(__dirname, './src'),
      },
    },
    css: {
    
    
      preprocessorOptions: {
    
    
        less: {
    
    
          javascriptEnabled: true,
        },
      },
    },
  }
})

4. @vitejs/plugin-legacy プラグインは、パッケージ化プロセス中に何をしますか?

パッケージ化プロセス中に、@babel/preset-env を使用して、ブラウザーでサポートされていない構文と新しい API を変換し、パッケージ内の各ブロックに対応する変換ブロックを生成し、SystemJS ランタイムを含むポリフィル ブロックを生成し、
パッケージファイル内のタグ
従来の名前を持つファイルの場合、各 js スクリプト ファイルには対応する変換バージョンがあり、
いくつかの script-nomodule スクリプトが html ファイルに追加されます。これらのスクリプトは、ブラウザのサポートに従って、またはブラウザのサポートに従って、ファイルの通常バージョンを動的に導入します。 Legacy という単語を含む変換バージョン ファイル

パッケージ化ファイル変換後の例:

このようにして、パッケージ化してデプロイした後、ページは下位バージョンのブラウザーで正常に表示できるようになります。