How does vite build be compatible with low version browsers

Table of contents

1. Problems

Two, the solution

1. Install @vitejs/plugin-legacy

2. Configure vite.config.ts

3. Points to note

---

1. Problems

Recently, I am refactoring my blog with Vite4+Typescript+Vue3.2+SSR+React17+Angular14+qiankun micro-application architecture . After I built it and launched it, I found that mainstream browsers such as Google are running normally, but in the company's own operating system The following error has been reported on the browser: Uncaught SyntaxError: Unexpected token '?'

Two, the solution

After checking the error, I found that many low-version browsers do not support the native ESM import method. The old version of the blog is built with webpack, and it is configured with bable escape ES2015, so it is no problem to run in a lower version or with a built-in browser. It is now built with vite4 and does not use bable for escaping. What about the vite build? 

First install the official plugin  @vitejs/plugin-legacy  to automatically generate traditional browser  chunks  and polyfills corresponding to ES language features. Compatible chunks will only be loaded on demand in browsers that do not support native ESM.

1. Install @vitejs/plugin-legacy

npm install  @vitejs/plugin-legacy -D

2. Configure vite.config.ts

At the same time, the build.target configuration item  in vite.config.ts   specifies the build target as es2015

import { defineConfig } from 'vite';
import legacyPlugin from '@vitejs/plugin-legacy';
export default defineConfig({
  plugins: [
    // 浏览器兼容问题配置
    legacyPlugin({
      targets: ['defaults', 'not IE 11'],
      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'
      ]
    })
  ],
  build: {
    target: 'es2015'
  }
});

Package and run to the browser.

The new version of the browser works fine! Older browsers work fine! yyds!

3. Points to note

Vue3 does not support ie11 , because vite is not only for vue, it is an independent development server and packaging tool, it can also serve other frameworks such as react, so this is a misunderstanding, other frameworks are possible through @vitejs /plugin-legacy supports ie11, but the proxy of vue3 cannot.

@vitejs/plugin-legacy - npm

Welcome to communicate in the comment area.

If the article is helpful to you, ❤️Follow+Like❤️Encourage ! The blogger will continue to update. . . .

vite4+typescript+vue3+SSR blog link: Fu Chaoyang's blog