vite + vue3 解决低版本火狐浏览器兼容性问题

vite + vue3 解决低版本火狐浏览器兼容性问题

第一步：用以下命令创建一个 vue3 项目 （没装 vite 的先去装 vite 不然创建不了）

1.npm create vite@latest

2.填写项目名称

3.选择 vue

4.选择JavaScript

5.cd 项目名称

6.npm install

第二步：用 npm install @vitejs/plugin-legacy 命令安装打包兼容性插件 ->

npm install @vitejs/plugin-legacy

第三步：在vite.config.js 配置文件中配置好如下内容 ->

import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['firefox < 59','chrome < 60'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      polyfills: [
        'es.symbol',
        'es.promise',
        'es.promise.finally',
        'es/map',
        'es/set',
        'es.array.filter',
        'es.array.for-each',
        'es.array.flat-map',
        'es.object.define-properties',
        'es.object.define-property',
        'es.object.get-own-property-descriptor',
        'es.object.get-own-property-descriptors',
        'es.object.keys',
        'es.object.to-string',
        'web.dom-collections.for-each',
        'esnext.global-this',
        'esnext.string.match-all'
      ]
    })
  ],
})

第四步：用 npm run build 命令打包项目

npm run build

第五步：用 serve -s dist 命令启动打包好的项目

serve -s dist