CameraMachine/frontend/vite.config.ts

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

// https://vite.dev/config/
export default defineConfig({
  // 插件配置，这里使用了Vue插件，以便支持Vue项目的构建
  plugins: [vue()],


  /**
   * 配置对象，用于定义 CSS 预处理器的选项。
   * 通过此配置可以预导入公共样式文件，确保全局样式在所有 SCSS 文件中可用。
   */
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use '@/styles/color.scss' as *;
          @use '@/styles/index.scss' as *;
        ` // 可选：预导入公共样式
      }
    }
  },

  // 解析配置，用于配置模块查找和解析行为
  resolve: {
    // 定义解析文件的扩展名，这允许导入这些文件时省略扩展名
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],

    // 路径别名配置，这里定义了'@'符号指向项目的src目录
    // 这有助于减少路径引用的复杂性，提高代码的可读性和可维护性
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  // 配置服务器相关设置
  server: {
    // 设置服务器监听的端口
    port: 3000,
    // 配置代理设置，用于开发环境中代理API请求
    proxy: {
      // 当请求以'/api'开头时，将其代理到目标服务器
      '/api': {
        // 目标服务器的地址
        target: 'http://dev2.pubdata.cn',
        // 允许更改目标服务器的来源
        changeOrigin: true
      },
    },
  },
})