Vite基本配置（持续更新）参考视频vite打包配置详解—手把手教你配置vite base配置打包公共路径可以将绝对路

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

base配置打包公共路径

可以将绝对路径改为相对路径

export default defineConfig({
  base:'./',
  ...
  plugins: [react()]
})

alias配置别名

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import {resolve} from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@':resolve(__dirname,'src')//将@指向src
    }
  },
  plugins: [react()]
})

注意，你这样直接引用,会报错:设置别名找不到“path”获取相应组件的类型声明

npm install @types/node --save-dev

npm安装这个包可以解决问题

注意：

我们可以将设置别名封装为一个函数_resolve

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import {resolve} from 'path'
// https://vitejs.dev/config/
function _resolve(dir:string){
    return resolve(__dirname,dir)
}
export default defineConfig({
  resolve: {
    alias: {
      '@':_resolve('src')//将@指向src
    }
  },
  plugins: [react()]
})

但是对于ts项目，我们还需要修改ts的配置项

{
  "compilerOptions": {
    ...,
    "paths": {
      //配置导出路径
      "@/components*": ["./src/components*"],
      "@/stores*": ["./src/stores*"],
      "@/modules*": ["./src/modules*"],
      "@/utils*": ["./src/utils*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

参考链接：Vite配置alias（设置别名） - 掘金 (juejin.cn)

生产环境移除log配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import {resolve} from 'path'
// https://vitejs.dev/config/
// 对别名路径进行封装
function _resolve(dir: string) {
  return resolve(__dirname,dir)
}
export default defineConfig({
  ...,
  build: {
    minify: 'terser',//一定要写，不写的话，默认为esbild，对下面的配置项是不生效的
    terserOptions: {
      compress: {
        // 生长环境移除console.log
        drop_console: true,
        drop_debugger:true
      }
    }
  }
})

注意：一定要注意写minify：’terser‘

Antd在vite项目中使用

引入样式的时候

@import 'antd/dist/antd.css';

参考链接：React+vite引入antd并按需引入 - 腾讯云开发者社区-腾讯云 (tencent.com)

Mock数据的配置

首先安装依赖
```
npm i  mockjs vite-plugin-mock -D
```

配置vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";
// 首先引入插件
import { viteMockServe } from "vite-plugin-mock";

export default defineConfig({
  ...,
  plugins: [
    react(),
    viteMockServe({
      mockPath: "mock",//vite要求我们mock的数据全部是放在根目录下的mock文件夹里面的
    }),
  ]
});

vite中使用mock要求我们必须是将mock数据放在根目录下，并且创建mock文件夹进行引入

配置mock的文件

// test.ts
import { MockMethod } from 'vite-plugin-mock'
export default [
  {
    url: '/api/get',
    method: 'get',
    response: ({ query }) => {
      return {
        code: 200,
        data: {
          name: 'vben',
        },
      }
    },
  }
] as MockMethod[]

假如我们使用axios发送请求，那么直接写

useEffect(() => {
    axios.get('/api/get').then(res => {
      console.log(res.data);
    })
  },[])

配置前端跨域问题

在vite.config.ts里面配置

export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      }
    }
  }
})

一般我们推荐使用正则表达式写法

到时候直接发送请求就行

useEffect(() => {
    axios.get('/fallback').then(res => {
      console.log(res.data)
    })
  },[])

gzip代码压缩

首先安装插件
```
npm i vite-plugin-compression -D
```

然后再vite.config.ts里使用

import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [viteCompression()],
  };
};

图片压缩

后续再写