在开始模式，webpack服务监听多个IP地址，可以在局域网内访问服务；viewer显示的图像从远程IP获取；兼容开发环境与production环境

config/dev.ts

@@ -23,7 +23,9 @@ export default {
           // }
         },
       },
-      host: 'localhost', // 这里设置你想要的主机名，
+      host: '0.0.0.0', // 监听所有网络接口
+      open: false, // 可选：是否自动打开浏览器
+      port: 10086, // 可选：指定端口号
       static: {
         directory: path.resolve(__dirname, '../public'),
       },

config/index.ts

@@ -21,7 +21,10 @@ export default defineConfig<'webpack5'>(async (merge) => {
     sourceRoot: 'src',
     outputRoot: 'dist',
     plugins: ['@tarojs/plugin-http'],
-    defineConstants: {},
+    defineConstants: {
+      // 开发环境下使用空字符串，实际请求会自动拼接当前域名
+      API_BASE_URL_FROM_WEBPACK: process.env.NODE_ENV === 'development' ? '""' : '"http://101.43.219.60:7700"'
+    },
     copy: {
       patterns: [],
       options: {},

src/API/config.ts

@@ -1 +1,2 @@
-export const API_BASE_URL = 'http://localhost:10086/dr/api/v1/';
+export const API_BASE_URL = `${API_BASE_URL_FROM_WEBPACK}/dr/api/v1/`;//'http://localhost:10086/dr/api/v1/';
+export const IP_PORT =`${API_BASE_URL_FROM_WEBPACK}`;

src/pages/view/components/viewers/stack.image.viewer.tsx

@@ -9,6 +9,7 @@ import { SystemMode } from '@/states/systemModeSlice';
 import store from '@/states/store';
 import { clearAction } from '@/states/view/functionAreaSlice';
 import { useDispatch } from 'react-redux';
+import { IP_PORT } from '@/API/config';
 
 const { PanTool, WindowLevelTool, StackScrollTool, ZoomTool, LabelTool, ToolGroupManager, Enums: csToolsEnums } = cornerstoneTools;
 const { MouseBindings } = csToolsEnums;
@@ -154,10 +155,10 @@ const StackViewer = ({ imageIndex }) => {
       const imageId1 = 'dicomweb:https://ohif-assets-new.s3.us-east-1.amazonaws.com/ACRIN-Regular/CT+CT+IMAGES/CT000000.dcm';
       const imageId2 = 'dicomweb:https://ohif-assets-new.s3.us-east-1.amazonaws.com/ACRIN-Regular/CT+CT+IMAGES/CT000005.dcm';
       const imageId3 = 'dicomweb:https://ohif-dicom-json-example.s3.amazonaws.com/LIDC-IDRI-0001/01-01-2000-30178/3000566.000000-03192/1-001.dcm';
-      const imageId4 = 'dicomweb:http://localhost:10086/dr/api/v1/auth/image/dcm/CTImage.dcm';
-      const imageId5 = 'dicomweb:http://localhost:10086/dr/api/v1/pub/dcm/CTImage.dcm';
-      const imageId6 = 'dicomweb:http://localhost:10086/dr/api/v1/auth/image/dcm/CTImage.dcm';
-      const imageId7 = 'dicomweb:http://localhost:10086/dr/api/v1/pub/dcm/CTImage.dcm';
+      const imageId4 = `dicomweb:${IP_PORT}/dr/api/v1/auth/image/dcm/CTImage.dcm`;
+      const imageId5 = `dicomweb:${IP_PORT}/dr/api/v1/pub/dcm/CTImage.dcm`;
+      const imageId6 = `dicomweb:${IP_PORT}/dr/api/v1/auth/image/dcm/CTImage.dcm`;
+      const imageId7 = `dicomweb:${IP_PORT}/dr/api/v1/pub/dcm/CTImage.dcm`;
       imageIndex = 6;
       await viewport.setStack([imageId1, imageId2, imageId3, imageId4, imageId5, imageId6, imageId7], imageIndex);
       viewport.render();