vite.config.js 配置_vite.config设置vue项目自动在浏览器中打开

vite.config.js 配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import { viteMockServe } from 'vite-plugin-mock';
 
export default defineConfig({
  // 项目根目录
  root: './',
 
  // 服务器配置
  server: {
    // 服务器端口号
    port: 3000,
    // 是否自动打开浏览器
    open: true,
    // 代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
 
  // 构建配置
  build: {
    // 输出目录
    outDir: 'dist',
    // 是否生成源代码映射文件
    sourcemap: true,
    // 是否启用压缩
    minify: true,
    // 是否将构建后的文件格式化
    terserOptions: {
      format: {
        comments: false
      }
    }
  },
 
  // 插件配置
  plugins: [
    // Vue插件
    vue(),
 
    // Mock插件
    viteMockServe({
      mockPath: 'mock',
      injectCode: `
        import { setupMock } from './mock/mock';
        setupMock();
      `
    })
  ],
 
  // 别名配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
});

在上面的配置文件中，我们使用defineConfig函数定义了一个配置对象，其中包含了常见的配置选项：

• root：指定项目根目录。
• server：服务器配置，包括端口号、是否自动打开浏览器、代理配置等。
• build：构建配置，包括输出目录、是否生成源代码映射文件、是否启用压缩、是否将构建后的文件格式化等。
• plugins：插件配置，可以在这里配置Vite插件。

根据您的实际需求，您可以在这个基本的配置文件中添加、删除或修改配置选项。