前言 最近遇到这么一个头疼的需求，第三方提供了两份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.ts import type { Plugin } from "vite"; import posthtml from "posthtml"; import ...
依赖 { "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": { "@rushstack/eslint-patch": "^1.3.2", "@vue/eslint-config-pret...
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的需求，首屏loading的需...
前言 unplugin-auto-import这个插件用于解决在书写组件时，总是需要从vue中import引入相同依赖的重复劳动。 import { computed, ref } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2) 使用自动引入后就不需要手动一个个import const count = ref(0) const doubled = computed(() => count.value * 2) 对于想偷懒的人来说，还是挺不错的。 插件会在代码被vi...
前言 最近同事测试落地页发现下载触发无响应，然后我为了调试方便，给他手机从酷安上下了一个谷歌浏览器，结果安装完才打开，发现页面直接就报错了，提示： 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: { ...
没有更多了
最近评论