最近在写一个基于vite的中后台管理系统的开源项目时，遇到这个问题，需要提供指定端口号及自动打开默认浏览器的设置供其他业务开发人员使用。

先打波小广告，这是我的中后台开源项目：https://www.github.com/cmdparkour/vue-admin-box

下面来说一下具体的配置步骤，供大家快速入门vite

1. 我们在使用vite创建好一个项目之后，会自动生成vite.config.js或vite.config.ts
2. 我们在文件的配置区，也即是export default {}这个区域里面，return 的时候写入

   {
     server: {
        port: 3005, // 你需要定义的端口号
        open: true, // open支持boolean/string类型，为true时打开默认浏览器，为string类型时，打开指定浏览器，具体查看官网即可
        proxy: { // 配置本地代理地址
          '/dev': 'http://xxx.xxx.com/api'
        }
     }
   }

完整的配置如下代码所示，展示了我项目中使用的配置，具体可参考上面的开源项目链接

1. 处理了@全局符号
2. mock数据的解决方案
3. 浏览器自动打开，指定端口号
4. 某些包独立打包的配置，下面展示的是echarts的独立打包

import { ConfigEnv, UserConfigExport } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
import { resolve } from 'path'

const pathResolve = (dir: string): any => {
  return resolve(__dirname, ".", dir)
}

const alias: Record<string, string> = {
  '@': pathResolve("src")
}

// https://vitejs.dev/config/
export default ({ command }: ConfigEnv): UserConfigExport => {
  const prodMock = true;
  return {
    resolve: {
      alias
    },
    server: {
      port: 3001,
      open: true,
      proxy: { // 代理配置
        '/dev': 'https://www.fastmock.site/mock/48cab8545e64d93ff9ba66a87ad04f6b/'
      },
    },
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            'echarts': ['echarts']
          }
        }
      }
    },
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock',
        localEnabled: command === 'serve',
        prodEnabled: command !== 'serve' && prodMock,
        watchFiles: true,
        injectCode: `
          import { setupProdMockServer } from '../mockProdServer';
          setupProdMockServer();
        `,
        logger: true,
      }),
    ]
  };
}