前言最近发现动态去拼接资源路径还是挺常用的，于是把我之前封装的hooks单独分享出来。教程useAssets.tsexport function useAssets() { /** 前缀补路径斜杠 */ // eslint-disable-next-line @typescript-eslint/no-unused-vars function addPrefixSlash(path: string) { return path.startsWith("/") ? path : `/${path}`; } /** ...
前言项目全线使用vue3的时候，自然使用的是配套更加契合的vite打包工具，于是自然而然会用到很多新的语法，比如这两年开始普及的可选链语法，这个语法都已经纳入声呐的代码规范中了，但是vite自身打包的时候，并不会做过多的兼容处理。默认情况vite的兼容目标是支持原生ES模块，原生ESM动态导入和import.meta的浏览器，官方预设的兼容目标如下：es2020edge 88firefox 78chrome 87safari 14而我们的可选链正是es2020版本才有的，所以vite在打包后不会做任何兼容处理，这就导致了一些浏览器版本低一点的设备，打开网站就会出现白屏的情况。显然这么新的...
前言多页面其实可以理解为多个独立的业务之间共享部分代码逻辑的实现。业务之间是相对独立的，只是小部分或者大部分的代码是可以共用的，常见的一个场景就是：改头换面形式的换肤。不同的皮肤之间毫无可复用组件代码的情况下，我们只能将通用的业务逻辑抽离成可复用的部分，简单点来说就是将数据与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...
前言unplugin-auto-import这个插件用于解决在书写组件时，总是需要从vue中import引入相同依赖的重复劳动。import { computed, ref } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2)使用自动引入后就不需要手动一个个importconst count = ref(0) const doubled = computed(() => count.value * 2)对于想偷懒的人来说，还是挺不错的。插件会在代...
前言最近同事测试落地页发现下载触发无响应，然后我为了调试方便，给他手机从酷安上下了一个谷歌浏览器，结果安装完才打开，发现页面直接就报错了，提示：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...
没有更多了
最近评论