vite.config.ts基础配置vite.config.ts文件基础配置，包括环境变量，全局样式变量，路径别名，端口

vite 导出对象

import { defineConfig, loadEnv } from 'vite'

defineConfig 用于导出 vite 配置对象，启用类型提示，也可以使用普通对象但是不会提示类型

export default defineConfig({})
loadEnv 用于加载 env 文件 vite 默认不加载 env 文件，需要通过 loadEnv 函数来指定需要加载哪些 env 文件第一个参数为 mode 环境变量，第二个参数为 process.cwd() 表示当前工作目录，第三个参数为 '' 表示加载所有环境变量，而不管是否有 VITE* 前缀，如果为 VITE*则加载 VITE_前缀的变量。

loadEnv(mode, process.cwd(), '')

vite.config.ts 配置对象

根据函数(也可以使用异步函数)返回配置对象: command: 'build'(vite dev 或 vite serve 生产环境) | 'serve'(vite build 开发环境) mode: 应用运行的模式,开发模式为 development，生产模式为 production

export default defineConfig(({ command, mode }) => { return {} })

配置对象属性:

base 开发或生产环境服务的公共基础路径
- 绝对路径 'foo': 部署在 (http://localhost:5173/foo) 路径下
  
  base: '/foo'
- 完整路径 '(http://localhost:5173/foo)': 部署在 (http://localhost:5173/foo) 路径下'
  
  base: 'http://localhost:5173/foo'
mode 应用运行的模式，可以通过 import.meta.env.MODE 获取

mode: import.meta.env.MODE
define 定义全局常量替换方式。其中每项在开发环境下会被定义在全局，而在构建时被静态替换。

css 配置

preprocessorOptions
- less
  - additionalData: 配置全局 less 变量 (例如:$injectedColor: orange;) 也可以引入 less 文件 (例如:@import "./src/styles/variables.less";)

css: {
  preprocessorOptions: {
    less: {
      //引入的全局less变量文件，该文件中定义的变量会作为全局变量，即在任何组件可以使用这些变量
      additionalData: `@import "./src/styles/variables.less";`;
    }
  }
}

resolve 配置

alias: 配置路径别名 (例如:'@': path.resolve(__dirname, './src'))
extensions: 导入时可以省略的文件后缀名 (例如:['.tsx', '.ts', '.jsx', '.js', '.vue', '.less'])

resolve: {
  alias: {
    //配置@ 路径指向 src 目录,导入文件时就可以使用 @ 代替 ./src
    // 例如: import HelloWorld from '@/components/HelloWorld.vue'
    '@': path.resolve(__dirname, './src')
  },
  // 导入时可以省略的文件后缀名
  extensions: ['.tsx', '.ts', '.jsx', '.js', '.vue', '.less']
}

optimizeDeps
- force : boolearn 是否强制依赖预构建默认为 false node_modules 中的依赖模块构建过一次就会缓存在 node_modules/.vite/deps 文件夹下，下一次会直接使用缓存的文件而有时候我们想要修改依赖模块的代码，做一些测试或者打个补丁，这时候就要用到强制依赖预构建。
server
- port 端口号
- host: 默认值为 localhost(监听本地) 监听的地址，如果为 true 或 0.0.0.0 则监听所有地址
- proxy 代理配置，用于解决跨域问题, 如果请求接口出现跨域的问题，可以使用代理解决例如访问 http://localhost:3000 出现跨域问题，通过配置之后可以访问/api,代理服务器会自动转发请求到 http://localhost:3000 '/api': 'http://localhost:3000'
```
  server: {
    // 监听地址
    host: '0.0.0.0',
    // 端口号
    port: 5173,
    // 代理配置
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
```

build

outDir 文件打包输出路径
assetsDir 指定静态资源打包路径

build: {
  // 打包输出路径
  outDir: 'dist',
  // 静态资源打包路径
  assetsDir: 'static'
}

plugins 配置插件 (例如:[vue()])

完整配置

// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig(({ command, mode }) => {
  return {
    base: '/',
    plugins: [vue()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
    server: {
      port: 5173,
      host: '0.0.0.0',
    },
    css: {
      preprocessorOptions: {
        less: {
          additionalData: `@import "./src/styles/variables.less";`
        }
      }
    },
    build:{
      outDir: 'dist',
      assetsDir: 'static'
    },
  }
})