vite 项目 vite.config.js 文件基本配置

Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。

Vite具有以下特点：

快速的冷启动
即时热模块更新（HMR，Hot Module Replacement）
真正按需编译
Vite是在推出Vue 3的时候开发的，目前支持的模板预设包括：
vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
vite.config.js在项目根目录下为vite项目的配置文件,Vite构建的项目都会有一个初始配置只有一个插件,不满足我们开发需求,
这里记录一下,我的基础配置:

import { defineConfig } from 'vite' // 使用 defineConfig 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
import vue from '@vitejs/plugin-vue'
const { resolve } = require("path");

export default ({ command, mode }) => {
  let isProd = (command === 'serve') // 情景配置 是否为开发模式  serve 或 build
  return defineConfig({
    plugins: [vue()], //查看 插件 API 获取 Vite 插件的更多细节 https://www.vitejs.net/guide/api-plugin.html
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src"), // 设置为@ 则使用时为 "@/components/index.module.css"
        "@components": resolve(__dirname, "./src/components"), // 使用时为 "@components/HelloWorld.vue"
    },
    },
    server: {
      port: 8006, // 本地服务端口
      strictPort:true, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
      proxy: { // 代理 
         // 字符串简写写法
        // '/foo': 'http://localhost:4567/foo',
        // 选项写法
        // '/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/, '')
        // }
    
      }
    },
    build:{
      // outDir: '', //指定输出路径（相对于 项目根目录). 建议使用系统默认
      // assetsDir:'', // 指定生成静态资源的存放路径（相对于 build.outDir）
    }
  })
}

// 更多配置参考 vite 中文网站