Vue 3 项目核心配置文件详解

你需要了解 Vue 3 项目中最常用、最关键 的配置文件，我会按项目根目录配置 和src 内业务配置分类整理，包含完整用法和示例，直接复制就能用。

一、根目录核心配置文件（项目运行/构建依赖）

1. vite.config.js（Vite 构建工具，Vue3 官方推荐）

这是 Vue 3 + Vite 项目最重要的配置文件，配置开发服务、打包、代理、路径别名等。

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

// https://vitejs.dev/config/
export default defineConfig({
  // 1. 插件配置
  plugins: [vue()],
  
  // 2. 路径别名（简化 import 路径）
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'), // @ 代表 src 目录
      '@assets': resolve(__dirname, 'src/assets')
    }
  },

  // 3. 开发服务器配置
  server: {
    host: '0.0.0.0', // 允许局域网访问
    port: 3000,      // 端口号
    open: true,      // 自动打开浏览器
    https: false,    // 关闭 https
    // 接口代理（解决跨域）
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端接口地址
        changeOrigin: true,              // 允许跨域
        rewrite: (path) => path.replace(/^\/api/, '') // 重写路径
      }
    }
  },

  // 4. 打包配置
  build: {
    outDir: 'dist',      // 打包输出目录
    assetsDir: 'assets', // 静态资源目录
    minify: 'terser',    // 代码压缩
    sourcemap: false     // 关闭 sourcemap（生产环境）
  }
})

2. package.json（项目依赖/脚本配置）

管理项目依赖、运行/打包命令，Vue3 标准配置：

{
  "name": "vue3-project",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",                // 启动开发环境
    "build": "vite build",        // 生产打包
    "preview": "vite preview"     // 预览打包结果
  },
  "dependencies": {
    "vue": "^3.4.0"               // Vue3 核心依赖
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "vite": "^5.0.0"
  }
}

3. .env 环境变量配置（多环境必备）

Vite 支持三种环境文件，放在项目根目录：

• .env：全局公共变量（所有环境生效）
• .env.development：开发环境变量（npm run dev）
• .env.production：生产环境变量（npm run build）

变量规则 ：必须以 VITE_ 开头

# .env.development
VITE_APP_TITLE = Vue3 开发环境
VITE_API_BASE_URL = /api
VITE_APP_DEBUG = true

使用方式：

<script setup>
console.log(import.meta.env.VITE_APP_TITLE)
</script>

4. .eslintrc.cjs（代码规范检查）

统一团队代码风格，避免语法错误：

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'vue/no-unused-vars': 'warn',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

5. prettier.config.cjs（代码格式化）

自动格式化代码（缩进、引号、分号）：

module.exports = {
  semi: false,        // 关闭分号
  singleQuote: true,  // 使用单引号
  tabWidth: 2,        // 缩进 2 格
  trailingComma: 'none'
}

---

二、src 目录内业务配置文件

1. src/main.js（项目入口配置）

Vue 3 入口文件，挂载全局组件、插件、样式：

import { createApp } from 'vue'
// 根组件
import App from './App.vue'
// 全局样式
import './style.css'

// 创建应用实例
const app = createApp(App)

// 全局配置（示例：全局指令/组件）
// app.directive('focus', { ... })
// app.component('GlobalButton', { ... })

// 挂载到 DOM
app.mount('#app')

2. src/router/index.js（路由配置 Vue Router）

Vue 3 路由标准配置（需先安装：npm install vue-router）：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

在 main.js 中挂载：

import router from './router'
app.use(router)

3. src/store/index.js（状态管理 Pinia 配置）

Vue 3 官方推荐状态库（替代 Vuex）：

import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

在 main.js 中挂载：

import pinia from './store'
app.use(pinia)

---

三、极简配置清单（快速复制）

1. 基础运行 ：vite.config.js + package.json
2. 多环境 ：.env / .env.development / .env.production
3. 路由 ：src/router/index.js
4. 状态管理 ：src/store/index.js
5. 代码规范 ：.eslintrc.cjs + prettier.config.cjs

总结

1. Vue 3 + Vite 核心配置是 vite.config.js，负责服务、代理、打包；
2. 环境变量必须以 VITE_ 开头，用 import.meta.env 调用；
3. 业务核心配置：main.js（入口）、router（路由）、pinia（状态）。