vue3+vite项目运行后实现自动在浏览器打开

方法一：使用 Vite 配置（推荐）

在 vite.config.js 或 vite.config.ts 中添加 server 配置：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    open: true, // 自动打开浏览器
    host: 'localhost', // 可选的，设置主机
    port: 3000, // 可选的，设置端口
    // 可选：配置是否自动打开特定页面
    // open: '/index.html'
  }
})

方法二：使用 package.json 脚本

在 package.json 中配置启动命令：

{
  "scripts": {
    "dev": "vite --open",
    "build": "vite build",
    "preview": "vite preview"
  }
}

或者使用更具体的命令：

{
  "scripts": {
    "dev": "vite --open --host localhost --port 3000",
    "dev:custom": "vite --open http://localhost:3000",
    "build": "vite build",
    "preview": "vite preview --open"
  }
}

方法三：使用环境变量

在 .env 或 .env.local 文件中设置：

VITE_OPEN_BROWSER=true

然后在 vite.config.js 中读取：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [vue()],
    server: {
      open: env.VITE_OPEN_BROWSER === 'true',
      host: 'localhost',
      port: 3000
    }
  }
})

方法四：自定义浏览器打开（高级配置）

如果需要指定浏览器或打开特定 URL：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    open: {
      target: 'http://localhost:3000',
      app: {
        name: 'chrome', // 指定浏览器
        arguments: ['--incognito'] // 浏览器参数
      }
    },
    host: 'localhost',
    port: 3000
  }
})

方法五：使用跨平台解决方案

如果你需要兼容不同操作系统：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    open: process.platform === 'darwin' ? 'google chrome' : 'chrome',
    host: 'localhost',
    port: 3000
  }
})

方法六：创建自定义插件

如果需要更复杂的逻辑，可以创建自定义插件：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const autoOpenBrowser = () => {
  return {
    name: 'auto-open-browser',
    configureServer(server) {
      server.httpServer?.once('listening', () => {
        const { port } = server.config.server
        const url = `http://localhost:${port}`

        // 使用子进程打开浏览器
        const { exec } = require('child_process')
        const openCommand = process.platform === 'win32' 
          ? 'start'
          : process.platform === 'darwin'
          ? 'open'
          : 'xdg-open'

        exec(`${openCommand} ${url}`)
      })
    }
  }
}

export default defineConfig({
  plugins: [vue(), autoOpenBrowser()],
  server: {
    host: 'localhost',
    port: 3000
  }
})

完整示例配置

这里是一个完整的 vite.config.js 示例：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    // 自动打开浏览器
    open: true,

    // 主机名
    host: 'localhost',

    // 端口号
    port: 3000,

    // 是否允许跨域
    cors: true,

    // 代理配置（如果需要）
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },

    // 热更新
    hmr: {
      overlay: true
    }
  },
  // 构建配置
  build: {
    outDir: 'dist',
    sourcemap: false,
    minify: 'terser'
  }
})

常见问题解决

端口被占用：

server: {
open: true,
port: 3000,
strictPort: true // 如果端口被占用，会提示错误而不是自动换端口
}

多个项目同时运行：

server: {
open: true,
port: 3000,
host: '127.0.0.1' // 使用特定 IP
}

在 Docker 或容器中运行：

server: {
open: false, // 容器中通常不需要自动打开
host: '0.0.0.0', // 允许外部访问
port: 3000
}

最简单的方法是使用方法一，在 vite.config.js 中添加 server.open: true 配置即可。