Vue3移动端开发实战：从零构建适配移动端的Web应用

Vue3移动端开发实战：从零构建适配移动端的Web应用

发布时间：2026/9/2 12:08:06
Vue3移动端开发实战：从零构建适配移动端的Web应用 在移动端开发领域Vue3 以其卓越的性能、优秀的开发体验和强大的组合式 API已成为构建现代 Web App 的首选框架之一。许多开发者从 Vue2 迁移而来或希望直接上手 Vue3 开发移动端应用却常常在环境配置、移动端适配、状态管理、组件库选型以及项目工程化等环节遇到挑战。本文将带你从零开始手把手构建一个功能完整的 Vue3 移动端应用涵盖从项目初始化、移动端适配、状态管理、路由配置到常用组件封装和项目构建部署的全流程。无论你是刚接触 Vue3 的新手还是希望系统学习移动端开发实践的开发者都能通过本文获得一套可直接复用的实战方案。1. Vue3 与移动端开发核心概念在开始实战之前我们需要明确几个核心概念这有助于理解后续的技术选型和实现方案。1.1 Vue3 的核心优势Vue3 于 2020 年正式发布它并非 Vue2 的简单升级而是一次全面的重构带来了诸多革命性的改进组合式 API (Composition API)这是 Vue3 最标志性的特性。它允许开发者根据逻辑功能来组织代码而不是像 Vue2 的选项式 API 那样根据选项data, methods, computed来组织。这使得代码更易于阅读、维护和复用尤其是在处理复杂组件时。你可以将相关的响应式数据、计算属性和方法封装在一个独立的“组合式函数”中。更好的性能Vue3 重写了虚拟 DOM优化了编译时的静态标记使得更新时的 diff 算法更高效。同时Tree-shaking 支持更好打包后的体积更小。更灵活的逻辑复用组合式 API 使得逻辑复用变得极其简单和灵活彻底解决了 Vue2 中 Mixins 带来的命名冲突和来源不清晰的问题。TypeScript 的友好支持Vue3 源码使用 TypeScript 重写提供了完美的类型推断极大地提升了大型项目的开发体验和代码健壮性。1.2 移动端 Web App 开发要点开发一个在手机浏览器中体验良好的 Web 应用需要特别关注以下几点响应式布局确保页面在不同尺寸和分辨率的移动设备上都能正常显示。这通常通过viewport元标签、CSS 媒体查询、Flex 布局、Grid 布局以及使用rem/vw等相对单位来实现。移动端交互处理触摸事件如touchstart,touchmove,touchend而非鼠标事件实现平滑的滚动、下拉刷新、上拉加载等原生应用般的交互。性能优化移动端网络环境和设备性能差异大需重点关注首屏加载速度、图片懒加载、代码分割、减少重绘回流等。原生能力模拟/调用虽然 Web App 运行在浏览器中但可以通过一些技术如 PWA、Hybrid 框架或 API如 Geolocation API、Device Orientation API来调用或模拟部分原生功能。1.3 技术栈选型说明基于 Vue3 生态我们将采用以下技术栈来构建我们的移动端应用构建工具Vite。它提供了极速的冷启动和热更新开发体验远超 Webpack非常适合 Vue3 项目。UI 组件库Vant 4。这是一个轻量、可靠的移动端 Vue 组件库组件设计遵循移动端交互规范且对 Vue3 支持良好。路由管理Vue Router 4。Vue 官方的路由管理器专为 Vue3 设计。状态管理Pinia。Vue 官方推荐的状态管理库它提供了更简洁的 API 和完美的 TypeScript 支持比 Vuex 更易用。移动端适配方案我们将使用postcss-pxtorem插件配合lib-flexible或amfe-flexible来将 CSS 中的px单位自动转换为rem单位实现弹性布局。2. 环境准备与项目初始化工欲善其事必先利其器。让我们先搭建好开发环境并创建项目骨架。2.1 开发环境要求请确保你的本地开发环境已安装以下工具Node.js版本建议在 16.0.0 或以上。你可以通过终端运行node -v和npm -v来检查版本。包管理器可以使用 npm随 Node.js 安装但更推荐使用yarn或pnpm它们在速度和磁盘空间利用上更有优势。本文示例将使用pnpm。代码编辑器推荐使用 Visual Studio Code并安装 Vue 官方扩展Volar以获得最佳的 Vue3 开发体验。2.2 使用 Vite 创建 Vue3 项目Vite 提供了多种模板。我们将使用vue-ts模板来创建一个支持 TypeScript 的项目。打开终端执行以下命令# 使用 pnpm pnpm create vite vue3-mobile-app --template vue-ts # 或者使用 npm npm create vitelatest vue3-mobile-app -- --template vue-ts # 进入项目目录 cd vue3-mobile-app # 安装依赖 pnpm install # 或 npm install命令执行后一个基础的 Vue3 TypeScript 项目就创建好了。目录结构如下vue3-mobile-app/ ├── public/ # 静态资源 ├── src/ │ ├── assets/ # 图片、字体等资源 │ ├── components/ # 公共组件 │ ├── App.vue # 根组件 │ └── main.ts # 应用入口文件 ├── index.html # 页面模板 ├── package.json ├── tsconfig.json # TypeScript 配置 ├── vite.config.ts # Vite 配置 └── ...2.3 安装核心依赖接下来安装我们选定的路由、状态管理和 UI 组件库。# 安装 Vue Router 和 Pinia pnpm add vue-router4 pinia # 安装 Vant 4 pnpm add vant # 安装移动端适配相关插件 # postcss-pxtorem: 将 px 转换为 rem # amfe-flexible: 用于设置 rem 基准值可选也可手动设置 pnpm add postcss-pxtorem amfe-flexible -D # 安装 Sass/SCSS 预处理器可选但推荐 pnpm add sass -D3. 项目基础配置与架构搭建现在我们来配置项目的核心部分包括路由、状态管理、UI 库引入和移动端适配。3.1 配置 Vue Router创建路由文件在src目录下创建router文件夹并新建index.ts文件。// src/router/index.ts import { createRouter, createWebHistory, RouteRecordRaw } from vue-router // 定义路由规则 const routes: ArrayRouteRecordRaw [ { path: /, name: Home, // 使用懒加载优化首屏性能 component: () import(/views/HomeView.vue) }, { path: /about, name: About, component: () import(/views/AboutView.vue) }, // 可以在此处继续添加其他路由 { path: /:pathMatch(.*)*, // 捕获所有未匹配的路由 name: NotFound, component: () import(/views/NotFoundView.vue) } ] // 创建路由实例 const router createRouter({ // 使用 HTML5 History 模式需要服务器支持。移动端也可用 createWebHashHistory history: createWebHistory(import.meta.env.BASE_URL), routes }) export default router创建视图组件在src目录下创建views文件夹并创建上述路由对应的.vue文件例如HomeView.vue和AboutView.vue。内容可以先简单写一个h1标签。在主文件中引入路由修改src/main.ts。// src/main.ts import { createApp } from vue import App from ./App.vue import router from ./router // 导入路由 const app createApp(App) app.use(router) // 使用路由插件 app.mount(#app)在根组件中添加路由视图修改src/App.vue。!-- src/App.vue -- template !-- 路由匹配到的组件将渲染在这里 -- router-view / /template script setup langts // 这是一个使用组合式 API 和 script setup 语法的组件 /script3.2 配置 Pinia 状态管理创建 Store在src目录下创建stores文件夹并新建counter.ts作为一个示例 Store。// src/stores/counter.ts import { defineStore } from pinia // 第一个参数是 store 的唯一 ID export const useCounterStore defineStore(counter, { state: () ({ count: 0 }), getters: { doubleCount: (state) state.count * 2 }, actions: { increment() { this.count }, decrement() { this.count-- } } })在主文件中引入 Pinia修改src/main.ts。// src/main.ts import { createApp } from vue import { createPinia } from pinia // 导入 Pinia import App from ./App.vue import router from ./router const app createApp(App) const pinia createPinia() // 创建 Pinia 实例 app.use(pinia) // 使用 Pinia 插件 app.use(router) app.mount(#app)3.3 引入并配置 Vant 组件库按需引入推荐为了减小打包体积我们采用按需引入的方式。首先安装相关插件。pnpm add vant/auto-import-resolver unplugin-vue-components -D配置vite.config.ts修改项目根目录下的vite.config.ts。// vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue import Components from unplugin-vue-components/vite import { VantResolver } from vant/auto-import-resolver // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), Components({ resolvers: [VantResolver()], // 自动按需引入 Vant 组件 }), ], })配置完成后在.vue文件中直接使用 Vant 组件如van-button即可无需手动import。插件会自动处理引入和注册。引入基础样式在src/main.ts或src/App.vue中引入 Vant 的 CSS 文件。// src/main.ts import { createApp } from vue import { createPinia } from pinia import App from ./App.vue import router from ./router // 引入 Vant 样式 import vant/lib/index.css const app createApp(App) const pinia createPinia() app.use(pinia) app.use(router) app.mount(#app)3.4 配置移动端 REM 适配我们的目标是让 1rem 等于设计稿宽度的 1/10。假设设计稿宽度为 375px。设置viewport和rem基准值修改index.html中的head部分并引入amfe-flexible或手动编写脚本。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / link relicon typeimage/svgxml href/vite.svg / meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno, viewport-fitcover / !-- viewport-fitcover 用于适配刘海屏 -- titleVue3 移动端应用/title !-- 引入 flexible 脚本用于动态设置 rem 基准值 -- script srchttps://g.alicdn.com/fd/lib/lib-flexible/0.3.4/flexible.js/script /head body div idapp/div script typemodule src/src/main.ts/script /body /html注意也可以不引入 CDN而是安装amfe-flexible包然后在main.ts中import amfe-flexible。配置 PostCSS 插件在项目根目录创建postcss.config.js文件。// postcss.config.js import pxtorem from postcss-pxtorem export default { plugins: [ pxtorem({ rootValue: 37.5, // 设计稿宽度 / 10。设计稿 375px - 37.5 propList: [*], // 需要转换的属性* 表示所有 selectorBlackList: [.norem] // 过滤掉 .norem 开头的类不进行 rem 转换 }) ] }现在你在 CSS 中书写px构建时就会自动转换为rem。例如设计稿上 20px 的宽度你直接写width: 20px;最终会变成width: 0.53333rem;(20 / 37.5)。4. 核心功能实战构建一个移动端应用页面让我们构建一个典型的移动端首页包含导航栏、轮播图、商品列表和底部标签栏。4.1 项目结构优化首先优化一下src目录结构使其更清晰src/ ├── api/ # 接口请求相关 ├── assets/ # 静态资源 ├── components/ # 公共组件 │ ├── common/ # 全局通用组件 │ └── business/ # 业务组件 ├── router/ # 路由 ├── stores/ # Pinia Store ├── utils/ # 工具函数 ├── views/ # 页面视图 ├── App.vue └── main.ts4.2 创建布局组件底部标签栏在src/components/common/下创建TabBar.vue。!-- src/components/common/TabBar.vue -- template van-tabbar v-modelactive route safe-area-inset-bottom van-tabbar-item v-foritem in tabList :keyitem.name :toitem.path :iconitem.icon {{ item.title }} /van-tabbar-item /van-tabbar /template script setup langts import { ref, watch } from vue import { useRoute } from vue-router import { HomeO, Search, ShoppingCartO, UserO } from vant/icons-vue // 引入图标组件 interface TabItem { name: string path: string title: string icon: any // 简化类型实际可用 Component } const route useRoute() const active ref(0) const tabList: TabItem[] [ { name: home, path: /, title: 首页, icon: HomeO }, { name: category, path: /category, title: 分类, icon: Search }, { name: cart, path: /cart, title: 购物车, icon: ShoppingCartO }, { name: mine, path: /mine, title: 我的, icon: UserO } ] // 监听路由变化高亮对应的标签 watch( () route.path, (newPath) { const index tabList.findIndex(item item.path newPath) if (index -1) { active.value index } }, { immediate: true } // 立即执行一次 ) /script注意需要先安装图标包pnpm add vant/icons-vue。4.3 创建首页视图修改src/views/HomeView.vue集成多个 Vant 组件。!-- src/views/HomeView.vue -- template div classhome-page !-- 顶部导航栏 -- van-nav-bar title商城首页 fixed placeholder safe-area-inset-top template #right van-icon namesearch size18 / /template /van-nav-bar !-- 搜索框 -- van-search v-modelsearchValue placeholder请输入搜索关键词 shaperound background#f5f5f5 searchonSearch / !-- 轮播图 -- van-swipe classmy-swipe :autoplay3000 indicator-colorwhite van-swipe-item v-for(image, index) in swipeImages :keyindex img :srcimage classswipe-img / /van-swipe-item /van-swipe !-- 宫格导航 -- van-grid :column-num5 :borderfalse clickable van-grid-item v-foritem in gridList :keyitem.text :iconitem.icon :textitem.text clickonGridClick(item) / /van-grid !-- 商品列表 -- div classsection-title热门推荐/div van-card v-forgoods in goodsList :keygoods.id :pricegoods.price :descgoods.desc :titlegoods.title :thumbgoods.thumb template #tags van-tag plain typedanger{{ goods.tag }}/van-tag /template template #footer van-button sizemini typeprimary clickaddToCart(goods) 加入购物车 /van-button /template /van-card !-- 引入底部标签栏 -- TabBar / /div /template script setup langts import { ref } from vue import { showToast } from vant import TabBar from /components/common/TabBar.vue import { useCounterStore } from /stores/counter // 示例使用 Store // 搜索框值 const searchValue ref() // 轮播图数据 const swipeImages ref([ https://fastly.jsdelivr.net/npm/vant/assets/apple-1.jpeg, https://fastly.jsdelivr.net/npm/vant/assets/apple-2.jpeg, ]) // 宫格导航数据 const gridList ref([ { text: 限时秒杀, icon: fire-o }, { text: 品牌特卖, icon: gem-o }, { text: 食品生鲜, icon: cart-o }, { text: 充值中心, icon: balance-o }, { text: 领券中心, icon: coupon-o }, ]) // 商品列表数据 const goodsList ref([ { id: 1, title: 商品名称商品名称商品名称, desc: 描述信息描述信息描述信息, price: 268.00, thumb: https://fastly.jsdelivr.net/npm/vant/assets/ipad.jpeg, tag: 热卖 }, { id: 2, title: 另一个商品, desc: 另一个描述, price: 199.00, thumb: https://fastly.jsdelivr.net/npm/vant/assets/ipad.jpeg, tag: 新品 }, ]) const counterStore useCounterStore() const onSearch (val: string) { showToast(搜索: ${val}) } const onGridClick (item: any) { showToast(点击了: ${item.text}) } const addToCart (goods: any) { // 这里可以调用 Store 的 action // counterStore.increment() showToast(已添加 ${goods.title} 到购物车) } /script style scoped langscss .home-page { padding-bottom: 50px; /* 为底部标签栏留出空间 */ } .my-swipe { margin: 10px; border-radius: 8px; overflow: hidden; } .swipe-img { width: 100%; height: 200px; display: block; } .section-title { font-size: 18px; font-weight: bold; padding: 15px 10px 10px; background-color: #fff; margin-top: 10px; } /* 使用 pxpostcss-pxtorem 会自动转换 */ .van-card { margin: 10px; } /style4.4 运行与验证在项目根目录运行开发服务器pnpm dev打开浏览器访问http://localhost:5173Vite 默认端口你将看到一个完整的移动端商城首页雏形包含了导航栏、搜索框、轮播图、宫格导航和商品卡片列表并且底部有可切换的标签栏。页面样式会根据设备宽度自动适配。5. 进阶功能与最佳实践完成基础页面后我们探讨几个移动端开发中的进阶功能和工程化实践。5.1 状态管理实战购物车让我们扩展之前的counterStore创建一个更实用的cartStore。// src/stores/cart.ts import { defineStore } from pinia import { ref, computed } from vue export interface CartItem { id: number title: string price: number count: number thumb: string } export const useCartStore defineStore(cart, () { // 使用 ref 定义状态 const items refCartItem[]([]) // 使用 computed 定义 getter const totalCount computed(() { return items.value.reduce((sum, item) sum item.count, 0) }) const totalPrice computed(() { return items.value.reduce((sum, item) sum item.price * item.count, 0) }) // 定义 actions (普通函数) function addItem(goods: OmitCartItem, count) { const existingItem items.value.find(item item.id goods.id) if (existingItem) { existingItem.count 1 } else { items.value.push({ ...goods, count: 1 }) } // 在实际项目中这里可以持久化到 localStorage } function removeItem(id: number) { const index items.value.findIndex(item item.id id) if (index -1) { items.value.splice(index, 1) } } function updateItemCount(id: number, newCount: number) { const item items.value.find(item item.id id) if (item newCount 0) { item.count newCount } else if (item newCount 0) { removeItem(id) } } function clearCart() { items.value [] } // 返回所有状态和方法 return { items, totalCount, totalPrice, addItem, removeItem, updateItemCount, clearCart } })在商品列表页可以这样使用script setup langts import { useCartStore } from /stores/cart const cartStore useCartStore() const addToCart (goods: any) { cartStore.addItem({ id: goods.id, title: goods.title, price: parseFloat(goods.price), thumb: goods.thumb }) showToast(添加成功) } /script5.2 路由守卫与权限控制在移动端应用中经常需要判断登录状态。我们可以使用 Vue Router 的导航守卫。// src/router/index.ts import { createRouter, createWebHistory, RouteRecordRaw } from vue-router const routes: ArrayRouteRecordRaw [ // ... 其他路由 { path: /user, name: User, component: () import(/views/UserView.vue), meta: { requiresAuth: true } // 添加元信息标记需要认证 } ] const router createRouter({ history: createWebHistory(), routes }) // 全局前置守卫 router.beforeEach((to, from, next) { // 假设有一个 authStore 来管理登录状态 // import { useAuthStore } from /stores/auth // const authStore useAuthStore() const isAuthenticated false // 模拟未登录 if (to.meta.requiresAuth !isAuthenticated) { // 如果路由需要认证且用户未登录重定向到登录页 next({ name: Login, query: { redirect: to.fullPath } }) } else { // 否则放行 next() } }) export default router5.3 移动端适配与样式最佳实践1px 边框问题在 Retina 屏上CSS 的1px会显示为物理像素的2px或3px。解决方案通常是使用伪元素 transform: scaleY(0.5)或者使用border-image。Vant 组件内部已处理此问题自定义样式时需注意。安全区域适配对于刘海屏、水滴屏手机需要避免内容被遮挡。Vant 组件如van-nav-bar和van-tabbar提供了safe-area-inset-top和safe-area-inset-bottom属性。对于自定义的固定定位元素可以使用 CSS 的env(safe-area-inset-*)。.fixed-bottom { position: fixed; bottom: 0; /* 在支持的环境下底部留出安全区域 */ padding-bottom: env(safe-area-inset-bottom); background-color: #fff; }禁止长按菜单与文本选择在App.vue的全局样式中添加* { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ -webkit-user-select: none; /* 禁止选中文本 */ user-select: none; } /* 但输入框和文本域需要允许选择 */ input, textarea { -webkit-user-select: auto; user-select: auto; }5.4 请求封装与 API 管理在src/utils/下创建request.ts使用axios封装网络请求。pnpm add axios// src/utils/request.ts import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from axios import { showToast } from vant // 创建 axios 实例 const service: AxiosInstance axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, // 从环境变量读取 timeout: 10000 // 请求超时时间 }) // 请求拦截器 service.interceptors.request.use( (config: AxiosRequestConfig) { // 在发送请求之前做些什么例如添加 token // const token localStorage.getItem(token) // if (token) { // config.headers![Authorization] Bearer ${token} // } return config }, (error) { // 对请求错误做些什么 return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( (response: AxiosResponse) { // 对响应数据做点什么 const res response.data // 假设后端返回格式为 { code: 0, data: {}, message: success } if (res.code ! 0) { showToast(res.message || Error) return Promise.reject(new Error(res.message || Error)) } else { return res.data // 直接返回有用的数据部分 } }, (error) { // 对响应错误做点什么 showToast(error.message || 网络请求失败) return Promise.reject(error) } ) export default service在src/api/下管理各个模块的接口// src/api/goods.ts import request from /utils/request // 获取商品列表 export function getGoodsList(params: any) { return request({ url: /goods/list, method: get, params }) } // 获取商品详情 export function getGoodsDetail(id: number) { return request({ url: /goods/${id}, method: get }) }在组件中使用script setup langts import { onMounted, ref } from vue import { getGoodsList } from /api/goods const goodsList ref([]) onMounted(async () { try { const data await getGoodsList({ page: 1, size: 10 }) goodsList.value data } catch (error) { console.error(获取商品列表失败, error) } }) /script6. 常见问题与排查思路在 Vue3 移动端开发过程中你可能会遇到以下典型问题。问题现象常见原因解决思路Vant 组件样式未生效1. 未引入 Vant 样式文件。2.unplugin-vue-components配置错误或版本不兼容。3. 样式被自定义样式覆盖。1. 检查main.ts中是否import vant/lib/index.css。2. 检查vite.config.ts中VantResolver配置并确保插件版本与 Vant 匹配。3. 使用浏览器开发者工具检查元素样式查看优先级。REM 适配失效页面布局错乱1.postcss.config.js未正确配置或未生效。2.rootValue计算错误。3.index.html中未设置viewport或flexible脚本未执行。1. 确认postcss.config.js文件在根目录且格式正确。2. 检查rootValue设计稿宽度/10。3. 查看 HTML 元素的计算样式看font-size是否被正确设置。页面在 iOS 上有白边或滚动不流畅1. 未处理 iOS 的-webkit-overflow-scrolling。2. 有元素阻止了弹性滚动。1. 为可滚动容器添加-webkit-overflow-scrolling: touch;。2. 检查是否有overflow: hidden误用在 body 或根元素上。路由跳转后页面不刷新1. 组件被keep-alive缓存。2. 路由参数变化但组件未响应。1. 检查是否使用了keep-alive考虑使用include/exclude或onActivated钩子。2. 使用watch监听route.params或route.query的变化。Pinia Store 数据刷新后丢失Store 状态默认是内存中的页面刷新会重置。结合localStorage或sessionStorage进行持久化。可以使用插件如pinia-plugin-persistedstate。开发服务器运行正常但生产构建后空白或报错1. 资源路径问题。2. 路由使用了 History 模式但服务器未配置。3. 组件异步加载失败。1. 检查vite.config.ts中的base配置。2. 生产环境若用 History 模式需服务器配置 Fallback 到index.html或改用 Hash 模式。3. 检查网络面板看是否有 chunk 加载失败。TypeScript 类型报错1. 未正确安装或导入类型定义文件。2. Volar 插件未启用或配置错误。1. 为第三方库安装types/包如pnpm add -D types/node。2. 确保 VS Code 使用的是 Volar 而非 Vetur并禁用 Vetur。7. 项目构建与部署开发完成后需要将项目构建为生产环境可用的静态文件。7.1 构建生产版本Vite 提供了开箱即用的构建命令。在package.json中通常已有如下脚本{ scripts: { dev: vite, build: vue-tsc vite build, // 先进行类型检查再构建 preview: vite preview // 预览构建产物 } }运行构建命令pnpm build构建完成后会在项目根目录生成dist文件夹里面包含了所有优化、压缩后的静态资源HTML, JS, CSS, 图片等。7.2 环境变量配置在项目根目录创建.env.development和.env.production文件用于管理不同环境下的变量。# .env.development VITE_API_BASE_URLhttp://localhost:3000/api# .env.production VITE_API_BASE_URLhttps://api.your-domain.com/api在代码中通过import.meta.env.VITE_API_BASE_URL访问。变量名必须以VITE_开头Vite 才会将其暴露给客户端。7.3 部署到静态文件服务器将dist目录下的所有文件上传到你的静态文件服务器如 Nginx, Apache, Tomcat, 或云服务商的对象存储 CDN。Nginx 配置示例支持 History 模式server { listen 80; server_name your-domain.com; root /path/to/your/dist; index index.html; location / { try_files $uri $uri/ /index.html; # 重要支持 History 模式 } # 缓存静态资源 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control public, immutable; } }7.4 性能优化建议代码分割与懒加载Vite 默认支持动态import()语法进行代码分割。Vue Router 的组件懒加载如上文所示就是利用此特性。图片优化使用 WebP 格式实现图片懒加载Vant 的van-image组件支持懒加载。利用浏览器缓存如上 Nginx 配置所示为静态资源设置长期缓存。压缩资源Vite 构建时已自动压缩 JS 和 CSS。使用 CDN将不常变化的第三方库如 Vue, VueRouter通过 CDN 引入减小应用主包体积。可通过vite的build.rollupOptions.external配置。通过以上步骤你已经完成了一个 Vue3 移动端应用从零到一的完整搭建、开发和部署流程。这套技术栈和工程实践能够支撑起大多数中小型移动端 Web 项目。接下来你可以根据具体业务需求深入探索更复杂的组件、状态管理方案、性能监控和 PWA 等高级特性不断打磨你的应用。