vite4 基础配置（详细篇）

以下都以 react+vite 为例 （vue 基本一样）

一、配置 proxy

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
  plugins: [react()],

  //设置代理
  server: {
    proxy: {
      "/api": {
        target: "http://192.168.1.12:8080/",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

 上面这段 vite 配置，意思是在本地启动一个 node server， 端口是 8080，这样 npm run dev 后就可以在浏览器中通过 localhost:8080 访问网站，并且当调用以 localhost:8080/api 开头的接口时，都会自动代理到 192.168.1.12:8080/api。

HTTPS 代理

如果代理目标是 HTTPS，就需要忽略安全证书校验，否则会出现接口状态一直 pending。忽略安全证书校验需要在 proxy 下添加 secure 字段，告诉 proxy 是否开启安全证书校验，默认是开启。 

{
  proxy: {
    "/api": {
      target: 'https://example.com',
      changeOrigin: true,
      secure: false,
      headers: {                  
        Referer: 'https://example.com'
      }
    }
  }
}

二、根目录设置别名

 resolve: {
    alias: { "@": resolve(__dirname, "src") },
    extensions: [".css", ".json", ".ts"], // 使用路径别名时想要省略的后缀名，可以自己 增减
  },

在 tsconfig.son 下配置

"compilerOptions": {
    // src别名
    "baseUrl": "./",
    "experimentalDecorators": true,
    "paths": {
      "@/*": ["src/*"]
    }
}

如果配置后引用组件没有路径提示，下载  Path Intellisense  插件

其它配置详情请看：

开始 | Vite 官方中文文档 (vitejs.cn)https://vitejs.cn/vite3-cn/guide/