关于Vite项目打包后浏览器兼容性问题的解决方案

目录
  • 一、问题描述
  • 二、问题分析
  • 三、解决方案
  • 四、过程中遇到的其他问题

一、问题描述

vite+vue3项目开发完以后,你会发现打包后的项目运行在新版浏览器可以正常显示,但运行在一些版本比较老的浏览器如 Chrome < 23、Firefox < 21和IE等浏览器上时显示一片空白,并且没有任何的错误提示。

二、问题分析

此时你的大脑可能跟页面一样也是一片空白,但是不要慌,我们先分析一下产生这个问题的可能的原因:那些版本较低的浏览器不支持ES6的语法和新API,而Babel默认只转换新的JavaScript句法,不转换新的API,比如Proxy、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法都不会转码。

三、解决方案

Plan A:在vite.config.js中配置浏览器的兼容性。

我们项目是用vite搭建的,因此我首先想到了使用vite自带的API去配置浏览器兼容性。
配置build.target和buid.cssTarget

  build: {
      target: ['chrome52'],
      cssTarget: ["chrome52"],
      }

打包并运行到浏览器后发现还是一片空白,查看打包生成的文件,发现里面依然有const、Promise等新语法和API,并没有为我们转换。Plan A ,No.

Plan B:先配置TypeScript转换语法,然后再让vite兼容目标。

在tsconfig.json文件内配置target为”es5”,然后开始打包。
打包时报错:error: Transforming const to the configured target environment (“es5”) is not supported yet
错误信息大抵在告诉我们:代码中有const等目标环境不支持的语法,并且它目前还不支持将const转换为目标环境"es5"。嗯这就有点意思了。Plan B, NO.

Plan C:引入babel-polyfill环境垫片

上面转换语法的方案失败后,我尝试给浏览器环境请一个外援:babel-polyfill,让它来做那些低版本浏览器环境做不到的事情。
什么是polyfill?官方的解释是:“用于实现浏览器不支持原生功能的代码”,我们可以简单理解为polyfill可以在当前运行环境中模拟出那些当前环境不支持的API,它为我们的当前环境提供了一个垫片,我们可以在这个垫片上使用新API。

首先我们先安装babel-polyfill:

npm install --save babel-polyfill

然后在main.js里引入它:

import ‘babel-polyfill'

然后我们重新打包、启动、运行到浏览器,有些伙伴到这一步可能就成功了,但我的仍然是一片空白!
慌不慌?你说慌不慌,慌!我也觉得慌,为什么?网上那么多人用这个方法成功了,但我们失败了,这能不慌? Plan C,No!

Plan D:使用@vitejs/plugin-legacy插件

以上三个方案失败后,我又重新回归到vite这一块,在vite官方文档中我找到了vite自带插件库,并且在插件库中找到了一个关于浏览器兼容支持的插件:@vitejs/plugin-legacy
首先安装插件:npm i @vitejs/plugin-legacy -D

然后在vite.config.js中配置

import legacyPlugin from '@vitejs/plugin-legacy'
export default defineConfig( {
    plugins: [
        legacyPlugin({
            targets:['chrome 52'],  // 需要兼容的目标列表,可以设置多个
            additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11时需要此插件
        })
    ]
})

打包、运行到浏览器。

新版本浏览器运行正常!旧版本浏览器运行正常!Plan D,yes!

以下是@vitejs/plugin-legacy插件的简单介绍:
插件默认行为:
1.使用@babel/preset-env转换,为包中的每个块生成相应的遗留块。
2.生成一个包含 SystemJS 运行时的 polyfill 块。
3.使用

打包后的变化:

  • 启用插件后打包完成的目录多出了一些带有legacy字样的文件,每个js脚本文件都有一个与其对应的遗留版本。
  • html文件中新增了一些脚本,这些脚本根据浏览器的支持程度来动态的引入正常版本文件还是带有legacy字样的遗留版本文件。
  • 此时当项目运行在一些版本较低的浏览器时,插件添加的脚本会自动加载legacy版本的文件。

四、过程中遇到的其他问题

在Plan D成功在低版本浏览器运行以后,发现有一些CSS样式显示不正常,随后确认是重写Vant的CSS变量没有生效。
刚开始认为是CSS在打包时没有做好兼容处理,然后就折腾了一番CSS的兼容支持。css解释器、postcss插件和vite配置css目标环境都没用。

后面就没有什么思路了,后来想起来在vite.config.js配置中有一个关于样式按需加载的插件:

此时就想是不是这个插件影响到了我的CSS的正常效果,当我把它移除并重新打包运行后,样式就回归正常了,看来确实是被它影响的。
使用这个按需加载的插件后,当页面加载时,它会根据它的一些规则去判断当前需要加载哪些样式文件,哪些不需要加载。在加载这些样式文件时,如果样式文件里有我们自定义全局样式重名的,那么根据css规则,我们自定义过的全局样式会被覆盖掉。
在本次的案例中,我们重写了Vant组件的部分变量,并全局引入了。在打开包含这些变量的页面时,按需加载插件此时才会加载Vant的样式文件,我们在全局重写的变量又被重写了,因此重写的全局变量没有生效。

到此这篇关于关于Vite项目打包后浏览器兼容性问题的解决方案的文章就介绍到这了,更多相关Vite打包浏览器兼容内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 解决项目vite1.0升级到2.0打包遇到Some chunks are larger问题

    打包项目过程中遇到警告 (想看结果,可以滑至底部) 输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk) Some chunks are larger than 500kb after minification. Consider: Using dynamic import() to code-split the application Use build.rollupOptions.output.ma

  • Vite vue3多页面入口打包以及部署踩坑实战

    目录 为什么需要多入口? 一.改造项目 二.vite.config.ts配置 三.部署 总结 为什么需要多入口? 公司原生的移动端上需要用webview引入一些性能要求不高的H5页面,初步考虑后选择用vue试个水,前期页面跳转选择使用vue-router,测试过程中在安卓高版本下右滑返回效果尚可,ios端初步尝试使用的最左侧touch事件移动距离检测以及router判断index添加过场动画,但是整体的效果依然达不到下图的效果. 原先项目中是使用多个html页面以及原生自带的协议去打开html,

  • vite插件打包更顺畅使用技巧示例

    目录 前言 前言 介绍 用法 使用(带参数): 给自定义进度条加点颜色: 实现思路 第一次打包(模拟模块总数) 与进度条配合 添加缓存 使用缓存 实现架构图 最后 前言 前言 在上一篇给大家带来了<如何入门去写一个 vite 插件>,能看的出来同学们也甚是喜欢,如果大家对 vite 感兴趣,可以关注我的专栏<vite 从入门到精通>: 因为公司目前大部分项目都已转为 vite,为了给社区添加一份贡献,故开发了一个已经应用到项目中的vite 前端打包进度条 的插件 vite-plug

  • vite2打包的时候vendor-xxx.js文件过大的解决方法

    vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,这就郁闷了. 打包时遇到警告 输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk) Some chunks are larger than 500kb after minification. Consider: Using dynamic import() to code-split the

  • 关于Vite项目打包后浏览器兼容性问题的解决方案

    目录 一.问题描述 二.问题分析 三.解决方案 四.过程中遇到的其他问题 一.问题描述 vite+vue3项目开发完以后,你会发现打包后的项目运行在新版浏览器可以正常显示,但运行在一些版本比较老的浏览器如 Chrome < 23.Firefox < 21和IE等浏览器上时显示一片空白,并且没有任何的错误提示. 二.问题分析 此时你的大脑可能跟页面一样也是一片空白,但是不要慌,我们先分析一下产生这个问题的可能的原因:那些版本较低的浏览器不支持ES6的语法和新API,而Babel默认只转换新的Ja

  • vue项目打包后上传至GitHub并实现github-pages的预览

    vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载 打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现 这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件 打开项目根目录config下的index.js文件,进行如下修改: 即

  • vue项目打包后部署到服务器的详细步骤

    耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作 一 ,打包项目 vscode下载链接: 链接: https://pan.baidu.com/s/1PD-Sts-e2V17wSs5FvrLmg 提取码: 2jbf 1 , vscode打开你的vue项目 -- > 点终端- > 新终端- >输入npm run build 按回车 , 显示正在打包..稍等一会 2

  • 浅谈VUE项目打包后运行页面一片白问题

    目录 1.说明 2.问题说明 3.解决 3.1.index.js 3.2.utils.js 3.3.webpack.prod.conf.js 4.总结 1.说明 我们用VUE搭建一个脚手架后,在IDEA等工具中开发时,启动都没有什么问题,但是项目开发完成之后,可能需要部署上线,所以需要进行打包操作了,一般都是用下面命令进行打包: npm run build 打包过程一般没有什么问题,然后就会在工程目录下生成一个[dist]文件夹,里面就是我们打包好的文件,把这些文件部署到Nginx中或者Tomc

  • 详解vue项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

  • 解决Vue 项目打包后favicon无法正常显示的问题

    在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法: 问题分析: 问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问题,出现问题的基本在使用本地图片作为favicon. 如下常规配置: 在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下,同时在index.html中正确配置favicon路径. 项目启动后会发现该中配置方式并没有生效: 打包后的项目同样存

  • 解决vue项目打包后提示图片文件路径错误的问题

    vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

  • 解决vue脚手架项目打包后路由视图不显示的问题

    脚手架vue-cli 搭建的项目,build后放于服务器上,发现其他资源全部变成静态加载成功,但路由视图为空,最初以为是webpack打包的问题,找了好久发现是路由配置问题. 解决办法如下: Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', base: '/system/', //添加根目录 scrollBehavior: () => ({ y: 0 }), routes }) 比如我是将打包后的dist和ind

  • 解决vue+elementui项目打包后样式变化问题

    博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染. 代码如下: main.js // The Vue build version to load with the `import

  • vue-cli3项目打包后自动化部署到服务器的方法

    一.安装 scp2 npm install scp2 --save-dev 二.写好脚本 例如 upload.js (下面任选一个即可) 位置和 package.json平级即可. 简略版 'use strict' // 引入scp2 var client = require('scp2'); client.scp('./dist/', { // 本地打包文件的位置 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址 "port": 'XX',

随机推荐