Vite配置工程执行run之后直接打开浏览器

项目运行的时候，执行npm run dev项目启动成功，每次还需要手动打开浏览器，粘贴地址，很麻烦，可以通过配置vite实现直接浏览器打开项目

打开根目录vite.config.ts配置server

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    open: true, // 是否主动唤醒浏览器
    port: 9527, // 使用端口
  }
})

执行编译命令

执行npm run dev

  VITE v5.0.10  ready in 316 ms

  ➜  Local:   http://localhost:9527/   // 已经变成了配置的端口
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

工程也可浏览器直接打开

大功告成！技术在会的人手上，总是很顺利，在不会的人手上，会遇到各种坑点，此篇总结两处坑：

1. 也许你配置了一个8080的端口，运行后是8081或者是其他，请不要惊讶，可能你配置的端口被占用了
2. 当你打开vite.config.ts发现千奇百怪的写法，不要乱写，看好结构，放到对应的位置