深度剖析初始化vue项目文件结构！！【前端】

最怕你又菜又安于现状

node_modules :项目依赖文件夹

public： 一般放置一些静态资源

放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中

**src：程序员源代码文件夹

• assets文件夹：一般防止静态资源（图片等），一般会放置多个组件共用的静态资源，一般防止在assets文件夹里的静态资源，webpack在打包的时候，会将静态资源当作一个模块打包到js文件里面

• components文件夹：一般放置非路由组件（一些共用的全局组件，例如Header.vue等）

• router文件夹：一般配置路由

  • router/index.ts:路由配置入口文件，定义路由规则、创建路由实例、路由守卫逻辑
  • router/xxx-routes.ts:拆分路由规则,通过 import 导入到 index.ts

• store文件夹：状态管理文件夹（存储和管理项目中「跨组件共享的状态」（如用户信息、全局设置、购物车数据等），避免通过 props/emit 层层传递数据。）

  • store/index.ts：创建 Pinia 实例并导出，供全局使用
  • modules/：按功能拆分的状态模块（如用户模块、购物车模块），每个模块独立维护自己的状态和方法

• utils文件夹：工具函数文件夹

  • utils/request.ts：封装 HTTP 请求（如 Axios），统一处理请求头、拦截器、错误等
  • format.ts：格式化工具（如日期格式化、数字千分位、字符串处理）
  • constants.ts：全局常量（如接口地址前缀、枚举值）。
  • storage.ts：封装 localStorage/sessionStorage 操作（如安全存取、过期处理）。

• views文件夹：页面视图文件夹（存放项目的「页面级组件」（即路由直接映射的组件），通常对应一个完整的页面（如首页、详情页、登录页））

• App.vue: 唯一的跟组件，vue中是.vue组件

• main.ts: 程序的入口文件，也是整个程序当中最先执行的文件

.env：环境变量配置文件

• 文件名可带环境后缀，优先级：.env.[mode].local > .env.[mode] > .env.local > .env；
  • .env.development：开发环境变量（pnpm run dev 时加载）；
  • .env.production：生产环境变量（pnpm run build 时加载）；
  • .env：全局默认变量（所有环境通用，优先级最低）。
• 变量必须以 VITE_ 开头（Vite 规定），才能在代码中通过 import.meta.env 访问。

package.json文件：项目依赖与脚本配置文件

描述项目基本信息、管理依赖包（dependencies/devDependencies）、定义项目脚本（如启动、打包、测试），是 npm/pnpm/yarn 管理项目的入口文件。

pnpm-lock.yaml：依赖版本锁定文件

由 pnpm 自动生成，精确锁定所有依赖包的版本（包括间接依赖），确保不同开发者 / 环境安装的依赖版本完全一致，避免 “在我电脑上能跑” 的问题。

tsconfig.json：TypeScript 编译配置文件

配置 TypeScript 的编译规则（如目标 JS 版本、类型检查严格度、模块系统），决定 TypeScript 代码如何被编译为 JavaScript，以及 IDE 如何提供类型提示。

vite.config.ts：Vite 构建工具配置文件

配置 Vite 的开发 / 构建行为（如端口、代理、插件、路径别名），是 Vite 项目的核心配置文件，决定项目如何启动、打包和优化。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'export default defineConfig({plugins: [vue()], // 启用 Vue 插件（必选）server: {port: 8080, // 开发服务器端口（默认 5173）open: true, // 启动后自动打开浏览器proxy: { // 接口代理（解决开发环境跨域）'/api': {target: 'http://localhost:3000', // 目标后端地址changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}},resolve: {alias: { // 路径别名（与 tsconfig.json 的 paths 同步）'@': path.resolve(__dirname, 'src')}},build: {outDir: 'dist', // 打包输出目录（默认 dist）sourcemap: false // 生产环境是否生成 sourceMap（关闭可减小包体积）}
})