dros/config/dev.ts

import type { UserConfigExport } from '@tarojs/cli';
import path from 'path';
import dotenv from 'dotenv';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';

// 加载 .env.development 文件中的环境变量
dotenv.config({ path: path.resolve(__dirname, '../.env.development') });

export default {
  logger: {
    quiet: false,
    stats: true,
  },
  defineConstants: {
    MQTT_BROKER_URL_FROM_WEBPACK: '"ws://192.168.110.13:8083/mqtt"',
  },
  mini: {},
  h5: {
    sourceMapType: 'eval-source-map',
    publicPath: '/',
    devServer: {
      proxy: {
        '/dr': {
          target: 'http://192.168.110.85:6001', // 你的后端服务地址
          changeOrigin: true, // 允许跨域
          // pathRewrite: {
          //   '^/dr/api': '' // 可选，用于重写路径
          // }
        },
        '/mqtt': {
          target: 'ws://192.168.110.85:8083', // MQTT WebSocket 服务地址
          changeOrigin: true,
          ws: true, // 启用 WebSocket 代理
          // pathRewrite: {
          //   '^/mqtt': '/mqtt' // 保持路径不变，或根据需要调整
          // }
        },
      },
      // server: 'https',  // 启用 HTTPS ，为了开发环境测试打开摄像头功能
      host: '0.0.0.0', // 监听所有网络接口
      open: false, // 可选：是否自动打开浏览器
      port: 10086, // 可选：指定端口号
      static: {
        directory: path.resolve(__dirname, '../public'),
      },
    },
    // Use webpackChain to customize Webpack
    // eslint-disable-next-line
    webpackChain(chain, webpack) {
      // 读取环境变量,告诉webpack在打包时，使用环境变量中定义的值 替换掉代码中的process.env.USE_MSW
      // 打印环境变量，检查是否正确读取
      console.log('环境变量 process.env.USE_MSW:', process.env.USE_MSW);
      console.log('环境变量 process.env.NODE_ENV:', process.env.NODE_ENV);

      // 确保使用正确的值，直接从.env文件读取
      const useMSW = JSON.stringify(
        process.env.USE_MSW === 'true' ? 'true' : 'false'
      );
      console.log('使用的 useMSW 值:', useMSW);

      // 检查 define 插件是否已存在，如果不存在则先创建它
      const hasDefinePlugin = chain.plugins.has('define');
      if (!hasDefinePlugin) {
        chain.plugin('define').use(webpack.DefinePlugin, [{}]);
      }
      /* 1. 把 Taro 可能注入的所有 react-refresh 插件先删掉 */
      chain.plugins.delete('react-refresh')          // 3.5 之前
      chain.plugins.delete('ReactRefreshWebpackPlugin') // 3.6+ 可能叫这个
      /* 2. 重新注册，强制关闭 overlay */
      chain
        .plugin('ReactRefreshWebpackPlugin') // 名字随意，保证唯一
        .use(ReactRefreshWebpackPlugin, [
          {
            overlay: false, // 👈 关键：关掉灰色蒙层
          },
        ])
      // 然后再修改插件配置
      chain.plugin('define').tap((args) => {
        // 确保args[0]存在
        if (!args[0]) {
          args[0] = {};
        }
        args[0]['process.env.USE_MSW'] = useMSW;
        console.log('DefinePlugin配置:', args[0]);
        return args;
      });
      chain.devServer.merge({
        setupMiddlewares: (middlewares, devServer) => {
          devServer.app.get('/mockServiceWorker.js', (req, res) => {
            res.set('Content-Type', 'application/javascript');
            res.sendFile(
              path.resolve(__dirname, '../public/mockServiceWorker.js')
            );
          });
          return middlewares;
        },
      });
    },
  },
} satisfies UserConfigExport<'webpack5'>;