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

最怕你又菜又安于现状

[node_modules :项目依赖文件夹](#node_modules :项目依赖文件夹)
[public：一般放置一些静态资源](#public：一般放置一些静态资源)
**src：程序员源代码文件夹
.env：环境变量配置文件
package.json文件：项目依赖与脚本配置文件
pnpm-lock.yaml：依赖版本锁定文件
[tsconfig.json：TypeScript 编译配置文件](#tsconfig.json：TypeScript 编译配置文件)
[vite.config.ts：Vite 构建工具配置文件](#vite.config.ts：Vite 构建工具配置文件)

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 项目的核心配置文件，决定项目如何启动、打包和优化。

bash 复制代码

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（关闭可减小包体积）
  }
})