Vue 工程化起步：Vite 项目初始化与联调

这篇只讲一件事：后端同学如何在最短时间内，搭好一个可联调、可维护、可交付的 Vue 工程骨架。

一、先明确“能交付”的最低标准

一个前端项目至少要满足：

• 本地一条命令可启动。
• 不同环境可切换（dev/test/prod）。
• 能通过代理或网关联调后端接口。
• 有最基本的代码质量门禁（lint + format）。

二、初始化项目（推荐 Vue3 + Vite + TypeScript）

pnpm create vite my-admin-app --template vue-ts
cd my-admin-app
pnpm install
pnpm dev

首次成功启动后，不要急着写业务，先把工程脚手架固定住。

三、先整理脚本和目录

package.json 里建议至少保留这些脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .ts,.vue",
    "format": "prettier --write ."
  }
}

建议先建好这些目录：

src/
  api/
  assets/
  components/
  router/
  stores/
  views/
  utils/

四、配置环境变量（别把地址写死）

env 文件建议拆为：

• .env.development
• .env.test
• .env.production

示例：

VITE_APP_TITLE=Admin Console
VITE_API_BASE_URL=/api

在代码中统一从 import.meta.env 读取：

export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;

五、开发环境代理配置（联调必备）

vite.config.ts：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5173,
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true
      }
    }
  }
});

这样页面请求 /api/users 时，会转发到后端 http://localhost:8080/api/users，可有效规避本地跨域问题。

六、接口层先搭好，不要在页面里裸写请求

src/utils/request.ts：

import axios from "axios";

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

request.interceptors.response.use(
  (response) => response.data,
  (error) => Promise.reject(error)
);

export default request;

src/api/user.ts：

import request from "@/utils/request";

export function getUserList(params: { pageNo: number; pageSize: number }) {
  return request.get("/users", { params });
}

七、最小联调闭环

1. 后端提供一个简单列表接口（例如 /api/users）。
2. 前端页面请求该接口并渲染表格。
3. 断网、500、超时场景至少测一遍。
4. 提交前执行一次 pnpm lint && pnpm build。

八、后端同学常踩坑

• 把 token 处理散落在页面中，导致维护困难。
• 在多个页面重复写同样的错误提示逻辑。
• 本地能跑但构建失败（通常是类型错误或路径别名问题）。
• 跳过 lint，最后在 CI 或提测阶段集中爆雷。

九、建议你在第一周完成的练习

• 新建一个 users 页面，完成列表查询。
• 补一个“新增用户”对话框，调用后端新增接口。
• 把成功和失败提示统一到请求拦截器中。

完成这三步，你已经从“会启动项目”进化到“能完成真实功能闭环”。