CameraMachine/frontend/vite.config.ts

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import replace from '@rollup/plugin-replace'
import config from "./src/config.json";
import path from 'path'



// https://vite.dev/config/
export default ({mode, command})=> {
  const env = loadEnv(mode, process.cwd(), 'API_') as Record<
      'API_HOST',
      string
      >
  return defineConfig({
    // 插件配置，这里使用了Vue插件，以便支持Vue项目的构建
    plugins: [
       vue(),
      /* 替换字符串 */
      replace({
        preventAssignment: true,
        __API__: `${command === 'build' ? env.API_HOST : ''}`,
      }),
    ],
    base: './', // 确保相对路径正确
    build: {
      outDir: 'dist',
      assetsDir: 'assets',
    },


    /**
     * 配置对象，用于定义 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'),
        vue: 'vue/dist/vue.esm-bundler.js' // 使用带 compiler 的构建版本
      },
    },
    // 配置服务器相关设置
    server: {
      // 设置服务器监听的端口
      port: 3000,
      // 配置代理设置，用于开发环境中代理API请求
      proxy: {
        // 当请求以'/api'开头时，将其代理到目标服务器
        '/api': {
          // 目标服务器的地址
          target: config.api,
          // 允许更改目标服务器的来源
          changeOrigin: true
        },
      },
    },
  })
}