fix: 修复打包后图片资源无法加载的问题

- 配置 webpack copy-webpack-plugin 将 src/assets 复制到 dist/assets
- 更新所有图片引用路径从 src/assets 改为 dist/assets
- 修改 localResourceRoots 配置以允许访问 dist/assets

package.json

@@ -135,6 +135,7 @@
     "@vscode/test-cli": "^0.0.12",
     "@vscode/test-electron": "^2.5.2",
     "@vscode/vsce": "^3.7.1",
+    "copy-webpack-plugin": "^14.0.0",
     "eslint": "^9.39.1",
     "ts-loader": "^9.5.4",
     "typescript": "^5.9.3",

pnpm-lock.yaml

@@ -57,6 +57,9 @@ importers:
       '@vscode/vsce':
         specifier: ^3.7.1
         version: 3.7.1
+      copy-webpack-plugin:
+        specifier: ^14.0.0
+        version: 14.0.0(webpack@5.103.0)
       eslint:
         specifier: ^9.39.1
         version: 9.39.1
@@ -823,6 +826,12 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  copy-webpack-plugin@14.0.0:
+    resolution: {integrity: sha512-3JLW90aBGeaTLpM7mYQKpnVdgsUZRExY55giiZgLuX/xTQRUs1dOCwbBnWnvY6Q6rfZoXMNwzOQJCSZPppfqXA==}
+    engines: {node: '>= 20.9.0'}
+    peerDependencies:
+      webpack: ^5.1.0
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -1928,6 +1937,10 @@ packages:
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
+  serialize-javascript@7.0.4:
+    resolution: {integrity: sha512-DuGdB+Po43Q5Jxwpzt1lhyFSYKryqoNjQSA9M92tyw0lyHIOur+XCalOUe0KTJpyqzT8+fQ5A0Jf7vCx/NKmIg==}
+    engines: {node: '>=20.0.0'}
+
   setimmediate@1.0.5:
     resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
 
@@ -3297,6 +3310,15 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
+  copy-webpack-plugin@14.0.0(webpack@5.103.0):
+    dependencies:
+      glob-parent: 6.0.2
+      normalize-path: 3.0.0
+      schema-utils: 4.3.3
+      serialize-javascript: 7.0.4
+      tinyglobby: 0.2.15
+      webpack: 5.103.0(webpack-cli@6.0.1)
+
   core-util-is@1.0.3: {}
 
   cross-spawn@7.0.6:
@@ -4431,6 +4453,8 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
+  serialize-javascript@7.0.4: {}
+
   setimmediate@1.0.5: {}
 
   shallow-clone@3.0.1:

src/panels/ICHelperPanel.ts

@@ -53,7 +53,7 @@ function getTierIconUri(
   const iconUri = webview.asWebviewUri(
     vscode.Uri.joinPath(
       context.extensionUri,
-      "src",
+      "dist",
       "assets",
       "titleIcon",
       iconFile,
@@ -138,7 +138,7 @@ export async function showICHelperPanel(
       retainContextWhenHidden: true,
       localResourceRoots: [
         vscode.Uri.joinPath(context.extensionUri, "media"),
-        vscode.Uri.joinPath(context.extensionUri, "src", "assets"),
+        vscode.Uri.joinPath(context.extensionUri, "dist", "assets"),
       ],
     },
   );
@@ -166,7 +166,7 @@ export async function showICHelperPanel(
   const autoIconUri = panel.webview.asWebviewUri(
     vscode.Uri.joinPath(
       context.extensionUri,
-      "src",
+      "dist",
       "assets",
       "model",
       "Auto.png",
@@ -175,7 +175,7 @@ export async function showICHelperPanel(
   const liteIconUri = panel.webview.asWebviewUri(
     vscode.Uri.joinPath(
       context.extensionUri,
-      "src",
+      "dist",
       "assets",
       "model",
       "lite.png",
@@ -184,7 +184,7 @@ export async function showICHelperPanel(
   const syIconUri = panel.webview.asWebviewUri(
     vscode.Uri.joinPath(
       context.extensionUri,
-      "src",
+      "dist",
       "assets",
       "model",
       "Sy.png",
@@ -193,7 +193,7 @@ export async function showICHelperPanel(
   const maxIconUri = panel.webview.asWebviewUri(
     vscode.Uri.joinPath(
       context.extensionUri,
-      "src",
+      "dist",
       "assets",
       "model",
       "Max.png",
@@ -204,7 +204,7 @@ export async function showICHelperPanel(
   const qrCodeUri = panel.webview.asWebviewUri(
     vscode.Uri.joinPath(
       context.extensionUri,
-      "src",
+      "dist",
       "assets",
       "QRCode",
       "wx.png",

src/views/ICViewProvider.ts

@@ -28,7 +28,7 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
       retainContextWhenHidden: true,
       localResourceRoots: [
         vscode.Uri.joinPath(context.extensionUri, "media"),
-        vscode.Uri.joinPath(context.extensionUri, "src", "assets")
+        vscode.Uri.joinPath(context.extensionUri, "dist", "assets")
       ],
     }
   );
@@ -47,21 +47,21 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
 
   // 获取模型图标URI
   const autoIconUri = panel.webview.asWebviewUri(
-    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Auto.png")
+    vscode.Uri.joinPath(context.extensionUri, "dist", "assets", "model", "Auto.png")
   );
   const liteIconUri = panel.webview.asWebviewUri(
-    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "lite.png")
+    vscode.Uri.joinPath(context.extensionUri, "dist", "assets", "model", "lite.png")
   );
   const syIconUri = panel.webview.asWebviewUri(
-    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Sy.png")
+    vscode.Uri.joinPath(context.extensionUri, "dist", "assets", "model", "Sy.png")
   );
   const maxIconUri = panel.webview.asWebviewUri(
-    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Max.png")
+    vscode.Uri.joinPath(context.extensionUri, "dist", "assets", "model", "Max.png")
   );
 
   // 获取二维码图片URI
   const qrCodeUri = panel.webview.asWebviewUri(
-    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "QRCode", "wx.png")
+    vscode.Uri.joinPath(context.extensionUri, "dist", "assets", "QRCode", "wx.png")
   );
 
   // 获取Logo URI

webpack.config.js

@@ -3,6 +3,7 @@
 'use strict';
 
 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 //@ts-check
 /** @typedef {import('webpack').Configuration} WebpackConfig **/
@@ -45,5 +46,12 @@ const extensionConfig = {
   infrastructureLogging: {
     level: "log", // enables logging required for problem matchers
   },
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: 'src/assets', to: 'assets' }
+      ]
+    })
+  ]
 };
 module.exports = [ extensionConfig ];