前言在前端开发中，为了确保一致和良好的用户体验，我们通常需要处理不同浏览器对 HTML、CSS 和 JavaScript 的支持差异。在 Vite 生态中，我们通常使用 .browserslistrc 文件来统一管理目标浏览器范围。像 postcss-preset-env 这样的工具会自动读取它来进行 CSS 降级。然而，一个常见痛点是 @vitejs/plugin-legacy 插件的 modernTargets 选项并不会自动读取该文件，需要我们手动配置。这就导致了同一个配置需要维护在两个地方：一份在 .browserslistrc 中给 PostCSS 使用，另一份在 vite.c...
前言在日常的 Vue 项目开发中，我们常常需要手动从 vue 或 vue-router 等库中导入 ref、computed、onMounted 等 API。这不仅是一项重复性的劳动，也打断了我们编写业务逻辑的思路。手动引入（之前）：import { computed, ref } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2)unplugin-auto-import 这款插件正是为了解决这个痛点而生。它能够自动为我们导入这些常用的 API，让我们专...
前言在前端开发中，浏览器兼容性是一个绕不开的话题。之前我曾探讨过如何用 Vite 解决低版本浏览器的白屏问题，但方案尚不完善。本文将以一个实际问题为切入点，深入剖析 Vite 项目中代码降级的两种核心方式——语法转译与 API Polyfill，并提供一套精准、自动化的终极解决方案。一个实际问题：Object.hasOwn 引发的兼容性报错有一次我的在开发微信H5页面应用的时候，我引入ky这个请求库，然后我就发现，即便是最新的微信开发者工具，打开还是会报错：Uncaught TypeError: Object.hasOwn is not a functionObject.hasOwn 是...
前言最近在开发一个Chrome插件，在阅读官方文档时发现它提供的都是js的方式，完全没有工程化的概念，而且插件的版本已经到v3了，v3版本限制了非常多的东西，比如我们使用vue的template渲染，由于vue用到了eval来实现，导致插件会报错，蛋疼的很，总不能写手写render函数吧，太累了。最好的解决办法就是用vite来打包vue项目，这样既可以用vue组件的方式开发，打包时也会将template转换成render函数，从而避免了eval的报错，我们还可以使用到ts和scss这些便利的工具。为此我们搭建一个开发模板需要实现以下功能：支持vite打包支持typescript支持scs...
前言项目全线使用vue3的时候，自然使用的是配套更加契合的vite打包工具，于是自然而然会用到很多新的语法，比如这两年开始普及的可选链语法，这个语法都已经纳入声呐的代码规范中了，但是vite自身打包的时候，并不会做过多的兼容处理。默认情况vite的兼容目标是支持原生ES模块，原生ESM动态导入和import.meta的浏览器，官方预设的兼容目标如下：es2020edge 88firefox 78chrome 87safari 14而我们的可选链正是es2020版本才有的，所以vite在打包后不会做任何兼容处理，这就导致了一些浏览器版本低一点的设备，打开网站就会出现白屏的情况。显然这么新的...
前言之前的vite很多文章一直推荐使用的是rollup-plugin-visualizer插件，但是这个插件真的一点都不好用，和webpack的体积分析差太多了。这次新项目中也需要用到体积分析，需要我找了很久，找到一个新的插件，基本上可以和webpack的体积分析差不多体验了。插件：vite-bundle-analyzer效果图：相比较之前的还是挺好用的。教程先安装依赖：pnpm i vite-bundle-analyzer -D然后去vite.config.ts中配置：import { defineConfig } from "vite"; import { ana...
前言最近发现动态去拼接资源路径还是挺常用的，于是把我之前封装的hooks单独分享出来。教程useAssets.tsexport function useAssets() { /** 前缀补路径斜杠 */ // eslint-disable-next-line @typescript-eslint/no-unused-vars function addPrefixSlash(path: string) { return path.startsWith("/") ? path : `/${path}`; } /** ...
前言多页面其实可以理解为多个独立的业务之间共享部分代码逻辑的实现。业务之间是相对独立的，只是小部分或者大部分的代码是可以共用的，常见的一个场景就是：改头换面形式的换肤。不同的皮肤之间毫无可复用组件代码的情况下，我们只能将通用的业务逻辑抽离成可复用的部分，简单点来说就是将数据与ui分离，数据是共用部分，ui是各自独立。最终衍生出的多页面结构大体如下：pages ├── pageA │ ├── App.vue │ ├── index.html │ ├── main.ts └── pageB ├── App.vue ├── index.html └── ma...
前言最近遇到这么一个头疼的需求，第三方提供了两份sdk，一个是针对安卓端使用的，一个是针对ios端使用的，但是他们都会在全局window上挂载同名属性对象，这就让我很难受了。<script src="/sdk/sdk.min.js"></script> <script src="/sdk/ios_sdk.min.js"></script>前端如果想要使用这个sdk就必须在head引入它，但是它又有两个脚本，后来的脚本又会覆盖上一个脚本在全局挂载的对象。理论上一个优秀的sdk不应该出现这种问题，它应该自...
前言通过vite官方的多页面打包示例，我发现它不会将html文件进行压缩处理，使用了一些第三方插件处理多页面，也都无法对html文件进行压缩处理，于是只能自己想办法了。效果图教程[hide]依赖安装pnpm i posthtml htmlnano cssnano terser svgo -D其中主力是posthtml和htmlnano，其它依赖都是他们的子依赖。编写插件创建文件：vite-plugin-html.tsimport type { Plugin } from "vite"; import posthtml from "posthtml"...
依赖{ "scripts": { "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" }, "devDependencies": { "...
vite中环境变量获取方式vite在处理环境变量时和之前webpack并不一样，它只会将环境变量文件中VITE_为前缀的变量加载到import.meta.env对象上去，而且并不支持动态key的形式：import.meta.env[key] //无效的因为import.meta.env.xxx打包时会被替换成字符串，比如有这么一个环境变量：VITE_NAME="aaa"；const name = import.meta.env.VITE_NAME; //打包后 const name = "aaa";所以如果你是一个动态的key，那就没法进行正确...
前言最近有一个想法，就是在使用rem适配大小的时候，往往我们会引入一个用于设置根元素大小的js脚本文件，但是对于这个脚本的处理根据不同情况会有不同的调用方式。以插件：amfe-flexible为例：比如我们是一个纯spa项目，一般就会在main.ts中import引入这个脚本：import "amfe-flexible";一般来说，这种做法没什么问题，因为spa的html渲染是js操作的，我们在渲染之前就引入了这个脚本，所以体验上会先通过amfe-flexible设置根元素大小，再进行html渲染，用户体验良好。随着业务的变化，我们可能会有SSR的需求，首屏loadi...
前言最近同事测试落地页发现下载触发无响应，然后我为了调试方便，给他手机从酷安上下了一个谷歌浏览器，结果安装完才打开，发现页面直接就报错了，提示：vue router SyntaxError: Unexpected token '?'我开始以为是路由出现问题了，结果查了半天发现是es的新特性??语法导致的。由于vite使用的是esbuild打包，所以我在esbuild的文档上查询到，??语法最低只支持Chrome 80版本，我一看安装的版本v78，两眼一黑。看来要做一个低版本的兼容处理了。教程vite的配置选项中有一个build选项，里面有一个target目标，表示你需...
前言今天才发现，vite使用了postcss做px转换的时候，导致index.html写的style标签里面的样式也被转换了。超级尴尬，导致静态loading的样式会大小变化一下，很难受。解决的思路还是很简单的，有两种方式：添加class黑名单，这样对应的class就不会转换了；排除指定文件，该文件不会被转换；我项目使用的是rem转换，vw的转换其实配置也差不多。解决办法rem插件postcss-pxtorem配置postcss.config.js中postcss-pxtorem的配置：module.exports = { plugins: { "pos...
没有更多了
最近评论