vscode扩展。从Webview'JS导入'

时间:2020-09-16 16:59:54

标签: javascript visual-studio-code vscode-extensions

我正在使用Webview作为单个Web应用程序编写vscode扩展。我的项目具有以下结构: enter image description here

在索引html中,我要导入脚本。

<script type="module">
import * as CommandHandler from '/core/CommandHadnler.js'
//some code
</script>

WebView设置 localResourceRoots

const UI_PATH = path.join(context.extensionPath, 'UI');
this._panel = vscode.window.createWebviewPanel(
    'JSONRPCTester',
    'JSONRPC Tester',
    vscode.ViewColumn.Two,
    {
        enableScripts: true,
        localResourceRoots: [
           vscode.Uri.file(UI_PATH)
        ]
    } 
 );

我看到有尝试加载模块的尝试,但是出现错误(忽略RPC *)。 enter image description here

加载网址:

vscode-webview://a8f78cdc-7d22-4793-810f-67c2d10dfb67/core/ClientProxy.js

可能是不正确的内容安全策略。我的政策设置:

<meta http-equiv="Content-Security-Policy" content="default-src self; img-src vscode-webview-resource:; script-src vscode-webview-resource: 'self' 'unsafe-inline'; style-src vscode-webview-resource: 'self' 'unsafe-inline'; ">

1 个答案:

答案 0 :(得分:0)

路径'/core/CommandHadnler.js'无效。您必须在本地计算机上指定JavaScript文件的完整路径,并用Webview.asWebviewUri进行转换。

请参见https://code.visualstudio.com/api/extension-guides/webview#loading-local-content