前端工程化实战：从零搭建一套可直接上线的 Vue3 项目架构很多开发者拿到需求就直接开写，后期项目越维护越乱、打包越来越

很多开发者拿到需求就直接开写，后期项目越维护越乱、打包越来越慢、协作越来越痛苦。其实一套规范、健壮、易扩展的工程化架构，前期多花一小时，后期能省几十小时。

这篇就带你从零搭建一套企业级 Vue3 工程化架构，包含目录规范、代码校验、自动格式化、路由配置、封装结构，搭建完可以直接用于正式项目。

一、项目初始化与基础配置

使用 Vite 创建项目，速度快、体积小、生态成熟。

npm create vite@latest my-project --template vue-ts
cd my-project
npm install
npm run dev

二、标准目录结构（直接照抄）

这是经过大量中后台项目验证的目录结构，协作统一、维护成本极低。

src/
├── api/           # 接口请求
│   ├── user.js
│   └── order.js
├── assets/        # 静态资源
├── components/    # 公共组件
├── composables/   # 通用 hook
├── constants/     # 常量、枚举
├── directives/    # 自定义指令
├── layouts/       # 布局组件
├── router/        # 路由
├── stores/        # 状态管理
├── styles/        # 全局样式
├── utils/         # 工具函数
├── views/         # 页面
├── App.vue
└── main.js

三、路由统一配置（支持权限 + 懒加载）

路由采用集中式配置，便于维护和权限控制。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/',
    component: () => import('@/layouts/Default.vue'),
    children: [
      {
        path: 'home',
        component: () => import('@/views/Home.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

四、Axios 封装（统一拦截、错误处理）

前端项目必备，避免每个页面重复写请求逻辑。

// utils/request.js
import axios from 'axios'
import { ElMessage } from 'element-plus'

const request = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000
})

// 请求拦截
request.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 响应拦截
request.interceptors.response.use(res => {
  return res.data
}, err => {
  ElMessage.error(err.message || '请求失败')
  return Promise.reject(err)
})

export default request

五、Pinia 模块化状态管理

按业务拆分 store，结构清晰、易于维护。

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null
  }),
  actions: {
    setToken(token) {
      this.token = token
      localStorage.setItem('token', token)
    }
  }
})

六、ESLint + Prettier 代码规范

统一团队代码风格，避免格式混乱。

// .eslintrc.cjs
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'prettier'
  ],
  rules: {
    'vue/no-unused-vars': 'warn',
    'no-console': 'off'
  }
}

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

七、环境变量配置

区分开发、测试、生产环境，避免接口地址写死。

.env.development
VITE_API_URL = '/api'

.env.production
VITE_API_URL = 'https://api.xxx.com'

八、全局组件与指令自动注册

减少重复引入，提升开发效率。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

九、通用工具函数封装

把常用方法统一放在 utils/，比如深拷贝、防抖、时间格式化等，做到一处封装、多处使用。

十、打包优化配置

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  build: {
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia']
        }
      }
    }
  }
})

结尾

工程化不是炫技，而是让项目更稳、更快、更好维护。

这套架构可以直接用于后台管理、H5、官网等绝大多数 Vue3 项目，结构规范、扩展性强，团队协作也非常舒服。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

前端工程化实战：从零搭建一套可直接上线的 Vue3 项目架构