vite+vue3 project solves the compatibility problem of low version (Safari white screen)
Use official plug-ins @vitejs/plugin-legacy Provides traditional browser compatibility support for packaged files.
1. Use the npm command to install the plug-in
npm add -D @vitejs/plugin-legacy
2. Introduce it in the plugins array in the configuration file
//
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11'],
}),
],
})Solve the problem of white screen development of vite+vue3 mixed development
Development environment: vite4.0+vue3.2
Usage scenario: After vite is packaged, embed the package into the app for use.
Problem description: After packaging, the app displays a white screen.
Solution: The default build goal is a browser that supports script tags, native ESM dynamic imports, and . Traditional browsers can be supported through the official plugin @vitejs/plugin-legacy
1. Install compatible plug-ins @vitejs/plugin-legacy
npm i @vitejs/plugin-legacy
2. Configure in plugins
legacy({
targets: ['defaults', 'not IE 11']
}),3. First execute the npm run build command to package it, and open dist/ after the package is completed.
Delete type="module", crossorigin, and nomodule in all <script></script> tags.
ps: If the above steps still exist, if there is a white screen, it may be that the browser version is too low. You can set legacy compatible with the lower version in it.
like
legacy({
targets: ['chrome 62'],
}),This is the article about the low-version compatibility problem of vite+vue3 project (Safari white screen). For more related contents of vite vue3 project compatibility, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!