基于独立Next.js应用创建VSCode扩展遇空白面板求助

以下是你遗漏的关键配置和调整步骤：

1. 强制Next.js静态导出（核心） #

VSCode Webview是纯浏览器环境，无法运行Next.js的Node.js服务端代码，必须将Next.js应用导出为纯静态资源：

• 在nextjs-blog/next.config.js中添加静态导出配置：

module.exports = {
  output: 'export',
  // 禁用SSR相关特性，确保所有页面都是静态生成
  experimental: {
    appDir: false, // 如果你用的是pages目录结构
  },
};

• 执行构建命令生成静态资源：

cd nextjs-blog
npm run build
npm run export

生成的静态资源会放在nextjs-blog/out目录下，后续Webview需加载此目录的内容。

2. 调整资源路径为相对路径 #

Next.js默认使用根路径加载资源，Webview中无法识别，需改为相对路径：
在next.config.js中添加：

module.exports = {
  // ...其他配置
  assetPrefix: './',
};

3. 修改Webview面板的HTML加载逻辑 #

不要直接加载.next目录下的JS文件，而是加载静态导出的out/index.html，并替换资源路径为Webview可访问的URI：
在HelloWorldPanel.ts中修改HTML生成逻辑：

import * as fs from 'fs';
import * as path from 'path';

// ...其他代码

// 读取静态导出的index.html内容
const htmlPath = path.join(extensionUri.fsPath, 'nextjs-blog', 'out', 'index.html');
let htmlContent = fs.readFileSync(htmlPath, 'utf8');

// 替换所有资源路径为Webview URI
htmlContent = htmlContent.replace(
  /src="\/_next\//g,
  `src="${getUri(webview, extensionUri, ['nextjs-blog', 'out', '_next'])}/`
);
htmlContent = htmlContent.replace(
  /href="\/_next\//g,
  `href="${getUri(webview, extensionUri, ['nextjs-blog', 'out', '_next'])}/`
);

// 最终Webview内容
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Next.js VSCode Extension</title>
  <meta http-equiv="Content-Security-Policy" content="
    default-src 'none';
    style-src ${webview.cspSource} 'unsafe-inline';
    script-src ${webview.cspSource};
    font-src ${webview.cspSource};
  ">
</head>
<body>
  ${htmlContent}
</body>
</html>
`;

4. 更新localResourceRoots配置 #

将资源根目录指向静态导出的out目录，而非.next：

localResourceRoots: [Uri.joinPath(extensionUri, "nextjs-blog", "out")]

5. 禁用文件名哈希（可选） #

如果需要固定资源文件名，避免每次构建后URI变化，可在next.config.js中配置Webpack：

module.exports = {
  // ...其他配置
  generateBuildId: () => 'static-build', // 固定构建ID
  webpack: (config) => {
    // 移除文件名哈希
    config.output.filename = 'static/chunks/pages/[name].js';
    config.output.chunkFilename = 'static/chunks/[name].js';
    config.module.rules.forEach(rule => {
      if (rule.test.toString().includes('css')) {
        rule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.options && oneOfRule.options.modules) {
            oneOfRule.options.modules.hashPrefix = '';
          }
        });
      }
    });
    return config;
  },
};

6. 验证Webview控制台错误 #

如果仍空白，打开VSCode的「开发人员工具」（快捷键Ctrl+Shift+I或Cmd+Shift+I），切换到「控制台」标签，查看是否有资源加载失败或JS报错，针对性修复。

内容的提问来源于stack exchange，提问作者argMaTea