Lecture19-Vite 配置、环境变量、打包、开发代理

管理员
2026-10-17
前端-框架工具
72
0
文章目录

    [toc]

    单词词性音标含义
    Viten./viːt/构建工具，把 Vue / TS 翻译打包并自带开发服务器
    proxyn./ˈprɒksi/开发代理，把 /api 请求转发到后端 8080
    changeOriginv./tʃeɪndʒ ˈɒrɪdʒɪn/代理选项，把请求来源伪装成后端自身
    envn./ˈenv/环境变量（environment），用于区分 dev / production
    VITE_-/viːt/只有该前缀的变量才会暴露给前端代码
    buildv./bɪld/打包，生成 dist/ 下可直接上线的静态文件
    distn./dɪst/打包产物目录（distribution），存放上线文件

    Lecture19-Vite 配置、环境变量、打包、开发代理

    1、本节讲什么

    学会改 Vite 的几处常用配置，理解**开发环境（dev）和生产环境（build）**的区别，并用 Vite 的代理解决开发期跨域。

    2、概念速览

    什么是构建工具（Vite）：把你写的源码（Vue/TS）"翻译 + 打包"成浏览器能直接跑的文件，还自带热更新、开发服务器。相当于 Maven 的"编译 + 打包"。

    什么是开发代理：开发时前端在 5173、后端在 8080，跨域麻烦。Vite 帮你"转发"——前端请求 /api，Vite 转到后端 8080，从浏览器看就像同源，跨域就绕过了。

    正确 vs 误区：代理只在开发期有效；打包上线后没有代理，那时跨域靠后端 CORS（第 20 节）。

    3、先看效果

    配置代理之前，浏览器禁止非同源异步请求：

    image-20250831222430404

    配置后，前端请求 http://localhost:5173/api/users 会被 Vite 自动转发到你后端的 http://localhost:8080。开发期用代理，生产期用 CORS（第 20 节）。

    image-20250831222708914

    4、照着做

    ① 打开 vite.config.ts，配置代理

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5173,                       // 开发端口（改端口就改这）
    proxy: {
      // 前端请求 /api/xxx 时，转发到后端 http://localhost:8080
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,           // 让后端以为请求来自它自己，解决开发期跨域
        
        // 路径重写：匹配到 /api 开头，把 /api 替换为空字符串
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    },
  },
})

    ② 前端请求就写相对路径

    // 开发时：走代理，最终打到 http://localhost:8080/api/users
const res = await axios.get('/api/users')

    ③ 环境变量：区分不同环境的值

    • 在前端工程的根目录，新建文件 .env.development（开发用）：
    VITE_API_BASE=/api
    • 在前端工程的根目录，新建文件 .env.production（生产用）：
    VITE_API_BASE=https://你的域名/api
    • 代码里用 import.meta.env.VITE_API_BASE 读取：
    const http = axios.create({ baseURL: import.meta.env.VITE_API_BASE })

    这样开发 / 生产自动用不同地址，不用改代码。

    ④ 打包

    npm run build

    执行后会在 dist/ 目录生成"可直接上线"的静态文件（HTML/CSS/JS）。npm run dev 是开发预览，npm run build 是生产产物，两者别混。

    5、常见疑问

    • Q：代理是什么？为什么能解决跨域？ A：跨域是浏览器的规则。代理是让请求先到同源的 Vite 服务器，由它转发给后端——浏览器看到的请求"没跨域"，自然不拦。这就是开发期跨域的官方解法。
    • Q：changeOrigin: true 一定要写吗？ A：通常要。它把请求的来源"伪装"成后端自己，后端才不会拒绝。
    • Q：import.meta.env.VITE_API_BASE 里的 VITE_ 前缀是什么？ A：只有以 VITE_ 开头的变量才会暴露给前端代码，别的不会。记住这个约定。
    • Q：开发好好的，打包后接口连不上了？ A：因为代理只在开发期生效，打包后的静态文件没有代理。生产环境要解决跨域，得靠第 28 节的 CORS。

    6、规范要点

    • 接口地址走环境变量 + baseURL 统一配置，不要在每个组件里写死域名。
    • 代理只服务开发期；生产期跨域一律用后端 CORS 解决，别指望前端代理（不生效）。
    • npm run dev 和 npm run build 命令要分清：开发看 dev，上线看 build 产物。

    7、本节验证

    • 会在 vite.config.ts 配置 server.port 与 /api 代理 ✅
    • 会用 .env.development / .env.production + import.meta.env.VITE_ 区分环境 ✅
    • 知道只有 VITE_ 前缀的变量会暴露给前端 ✅
    • 会 npm run build 生成 dist/ 产物，并分清 dev 与 build ✅
    end