Technology: vite+vue3.2+ts+element-plus
There is no problem in the development environment, but the packaged code is placed in the formal environment, and the page is blank...
The small partners on the scene sent an error report
Uncaught SynntaxError：Unexpected token ?
Nani, what's the reason, I'm at a loss
Accessed with Firefox browser, no error was reported, and it started to swing wildly... Time passed by little by little, and the whole network did not find a solution....
Guess the version of Google Chrome , tested version 90, and the page came out! Most of the browsers used by users are 65 and 70, which are too old
It's easy to locate the problem! Change keywords to search for "vite low-version browser compatibility issues", and sure enough, many people have encountered problems
problem analysis:
The browser kernel version is too low, resulting in a white screen when opened with a browser. This statement is a new syntax of ES6, and there is no problem with general browsers, but browsers with lower versions cannot parse this statement, so js conversion is required. We will use babel in general vue2 projects, but it is not easy to use babel in vite. Introduce another plug-in, which can translate the specified file into a target file, such as ts->js, without further ado, post the code.
The target file is vite.config.ts , which must be introduced first
Install
npm install @vitejs/plugin-legacy -D
npm add -D terser //This must be installed, otherwise an error will be reported when packaging
The Terser compressor must be installed , because the plug-in Legacy uses Terser for compression, without compression, the entire package will be 2Mb larger
// vite.config.js
import legacy from '@vitejs/plugin-legacy'export default {
plugins: [
vue(),
legacy({
targets: ['defaults', 'not IE 11'],
}),
],
}
After configuration, repackage and continue testing, the 70 browser on the intranet can already be opened, but 65 still can’t!
It seems unrealistic to consider allowing users to directly upgrade their browsers, and can only solve the 65 problem silently
Locally downloaded 65 browsers and tested it, and it turned out to be an error globalThis is not defined
Add in ap.vue
<script>
!(function (t) {
function e() {
var e = this || self;
(e.globalThis = e), delete t.prototype._T_;
}
"object" != typeof globalThis &&
(this
? e()
: (t.defineProperty(t.prototype, "_T_", {
configurable: !0,
get: e,
}),
_T_));
})(Object);
</script>
Sure enough, it perfectly solves the problem of blank pages! !
Although the page can be opened, the same console still reports a bunch of errors
Modified the configuration of vite.config.js
// vite.config.js
import legacy from '@vitejs/plugin-legacy'export default {
plugins: [
vue(),
legacy({
targets: ['defaults', 'not IE 11'],additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // This plugin is required when targeting IE11
modernPolyfills: true
// polyfills: ['es.object.values', 'es.array.flat-map']
}),
] ,
}
Perfect solution, the console is clean! ! !
Reference article:
vite + vue3 + ts install @vitejs/plugin-legacy Compatible with old browsers - vue3 project actual combat vite project low version browser compatibility issues_vite compatibility_Zixuange's Blog-CSDN Blog