内容摘要：去年帮朋友改一个 Vue 移动端项目，打开 `main.js` 我就愣住了。`import Vant from 'vant'` 后面跟着 `Vue.use(Vant)`，整个组件库全量引入。项目打包出

去年帮朋友改一个 Vue 移动端项目，动端打开 `main.js` 我就愣住了。项目`import Vant from 'vant'` 后面跟着 `Vue.use(Vant)`，动端整个组件库全量引入。项目项目打包出来 2.3MB，动端首屏白屏时间接近 4 秒。项目朋友说用户投诉多，动端他还以为是项目服务器问题。其实问题就写在他眼皮底下。动端

移动端项目和 PC 端最大的项目区别不在屏幕尺寸，而在资源约束。动端手机 CPU 弱、项目内存小、动端网络不稳定，项目用户耐心还特别差。动端PC 上多加载 500KB 用户可能察觉不到，手机上就是致命的。所以 Vue 移动端项目的第一原则是：能少加载就少加载，能晚加载就晚加载。

按需引入不是可选项

Vant、NutUI、Cube UI 这些库都支持按需引入。用 `babel-plugin-import` 配置一下，只有真正用到的组件才会进 bundle。上面那个项目改完之后，vendor chunk 从 1.8MB 降到 420KB。首屏时间直接砍到 1.2 秒。这不是优化，这是还债。

路由懒加载也一样。`() => import('@/views/Order')` 这种写法应该成为肌肉记忆。别把所有页面塞进一个 chunk 里，用户打开首页不需要加载“设置”和“关于我们”。

rem 还是 vw？别纠结，选一个就行

适配方案吵了好几年。`postcss-pxtorem` 配合 `amfe-flexible` 是经典组合，`postcss-px-to-viewport` 是后来者。两个都能用。我现在的习惯是 vw 方案，少一个 JS 运行时依赖，CSS 里写 `px`，构建时自动转 `vw`。设计稿 375px 宽，写 `font-size: 16px`，出来的就是 `4.267vw`。简单直接。

但注意一个坑：第三方组件库的样式也会被转换。如果你用了 Vant，它的 `1px` 边框可能变成 `0.266vw`，在某些设备上直接消失。解决办法是在 `postcss.config.js` 里把 `node_modules` 排除掉，或者用 `selectorBlackList` 过滤。

滚动和点击，移动端的两大坑

-webkit-overflow-scrolling: touch 这个属性现在基本不需要了，iOS 13 之后系统默认就支持惯性滚动。但 `overflow: hidden` 在移动端弹窗打开时经常失效，页面该滚还是滚。我一般用 `position: fixed` 加记录 `scrollTop` 的方式锁背景，虽然土，但管用。

点击延迟 300ms 的问题，`viewport` 加 `user-scalable=no` 就能解决。但更隐蔽的是点击穿透——弹窗关闭时，底下的元素会触发 click。用 `@touchstart.prevent` 替代 `@click` 能缓解，或者干脆在弹窗关闭后加个 300ms 的遮罩过渡。

状态管理别上来就 Vuex

移动端页面通常不复杂，很多项目根本用不着 Vuex。一个 `reactive` 对象加 `provide/inject` 就够了。我见过一个 8 个页面的项目，Vuex 里塞了 30 多个 mutation，改一个购物车数量要跳三个文件。后来换成 `Pinia`，代码量少了三分之一。Pinia 的 `setup` 写法确实更顺手，没有 mutation 那层包装，直接改 state。

调试工具得趁手

Chrome DevTools 的设备模拟只是第一步。真机调试我推荐 `vConsole`，虽然丑但稳定。`eruda` 功能更多，不过有时候会跟页面样式冲突。最靠谱的还是 Safari 的“开发”菜单连 iPhone，或者 Chrome 的 `chrome://inspect` 连安卓。真机上的滚动性能、键盘弹起、安全区域，模拟器永远模拟不出来。

安全区域适配现在也得考虑。iPhone 15 的底部横条，`env(safe-area-inset-bottom)` 不加的话，底部按钮会被挡住。一行 `padding-bottom: env(safe-area-inset-bottom)` 的事，但很多人忘了写。

说到底，Vue 移动端项目没什么高深技术，拼的是细节。一个组件按需引入、一张图片用 WebP、一个路由懒加载，每个小决定叠加起来，就是用户能感知到的流畅和卡顿之间的差距。