从0到1搭建Vue3+Vant移动端项目（四）终篇

15. 配置打包优化

修改vite.config.js，添加打包优化配置：

javascript 复制代码

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import styleImport, { VantResolve } from 'vite-plugin-style-import'
import postCssPxToRem from 'postcss-pxtorem'
import { createHtmlPlugin } from 'vite-plugin-html'
import viteCompression from 'vite-plugin-compression'

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  
  return defineConfig({
    plugins: [
      vue(),
      styleImport({
        resolves: [VantResolve()],
        libs: [
          {
            libraryName: 'vant',
            esModule: true,
            resolveStyle: (name) => `vant/es/${name}/style/index`
          }
        ]
      }),
      createHtmlPlugin({
        inject: {
          data: {
            title: env.VITE_APP_TITLE
          }
        }
      }),
      viteCompression({
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: 'gzip',
        ext: '.gz'
      })
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    server: {
      port: 3000,
      open: true,
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @import "@/styles/variables.scss";
            @import "@/styles/mixin.scss";
          `
        }
      },
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 37.5, // Vant 官方根字体大小是 37.5
            propList: ['*'],
            selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
          })
        ]
      }
    },
    build: {
      target: 'es2015',
      outDir: 'dist',
      assetsDir: 'assets',
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      },
      rollupOptions: {
        output: {
          chunkFileNames: 'assets/js/[name]-[hash].js',
          entryFileNames: 'assets/js/[name]-[hash].js',
          assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
          manualChunks: {
            vant: ['vant'],
            vendor: ['vue', 'vue-router', 'vuex', 'axios']
          }
        }
      }
    }
  })
}

16. 完整项目目录结构

最终项目结构应该如下：

csharp 复制代码

my-mobile-app/
├── node_modules/
├── public/
│   ├── favicon.ico
├── src/
│   ├── api/               # API请求模块
│   │   ├── common.js
│   │   ├── user.js
│   │   └── index.js
│   ├── assets/            # 静态资源
│   │   ├── logo.png
│   │   ├── default-avatar.png
│   │   └── 404.png
│   ├── components/        # 公共组件
│   │   ├── NavBar.vue
│   │   └── Tabbar.vue
│   ├── layout/            # 布局组件
│   │   └── index.vue
│   ├── router/            # 路由配置
│   │   └── index.js
│   ├── store/             # 状态管理
│   │   ├── modules/
│   │   │   ├── user.js
│   │   │   └── app.js
│   │   └── index.js
│   ├── styles/            # 全局样式
│   │   ├── index.scss
│   │   ├── reset.scss
│   │   ├── variables.scss
│   │   └── mixin.scss
│   ├── utils/             # 工具函数
│   │   ├── request.js
│   │   ├── auth.js
│   │   ├── validate.js
│   │   ├── storage.js
│   │   └── flexible.js
│   ├── views/             # 页面
│   │   ├── home/
│   │   │   └── index.vue
│   │   ├── login/
│   │   │   └── index.vue
│   │   ├── user/
│   │   │   └── index.vue
│   │   └── error/
│   │       └── 404.vue
│   ├── App.vue            # 根组件
│   ├── main.js            # 入口文件
│   └── permission.js      # 权限控制
├── .env.development       # 开发环境配置
├── .env.production        # 生产环境配置
├── .eslintrc.js           # ESLint配置
├── .prettierrc.js         # Prettier配置
├── commitlint.config.js   # Commit规范配置
├── index.html             # HTML模板
├── package.json           # 项目依赖
├── vite.config.js         # Vite配置
└── README.md              # 项目说明

17. 总结

本项目从0到1搭建了一个基于Vue3和Vant的移动端应用框架，包含了以下特点：

技术栈：Vue3 + Vite + Vant + Vuex + Vue Router
工程化：ESLint + Prettier + Husky + CommitLint
移动端适配：使用flexible.js和postcss-pxtorem实现
模块化：API模块、工具函数模块清晰分离
权限控制：基于路由的权限控制系统
组件封装：布局组件、公共组件等
代码优化：包括路由懒加载、图片懒加载、打包优化等
样式系统：基于SCSS的样式系统，包含变量、mixin等

这个项目结构可以作为企业级移动端项目的基础框架，具有高可扩展性和可维护性。团队可以基于此框架快速开发各类移动端应用，只需根据具体业务需求扩展相应功能模块即可。