Question

我想在vscode扩展Webview中使用vue.js。我想使用vue.js的数据绑定来创建Webview的HTML。我可以将vue.js作为脚本文件包含在webview HTML中。 Vue安装到DIV。甚至挂载功能也会运行。但是什么也没有呈现。

这是否与将Webview实现为iFrame有关？

这是一个github回购，其中包含一个说明问题的vscode扩展项目：https://github.com/lae0901/vscode-vue-webview-problem

这是构建Web视图HTML的代码。


function getWebviewContent(extPath: string)
{
    const main_uri = scriptUri_builder( extPath, 'media', 'main.js') ;
    const app_uri = scriptUri_builder( extPath, 'media', 'app.js') ;
    const vue_uri = scriptUri_builder( extPath, 'media', 'vue.min.js') ;

    // Use a nonce to whitelist which scripts can be run
    const nonce = getNonce();

    return `<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="Content-Security-Policy" 
            content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>vue webview</title>
        </head>
        <body>

            <button id="but1">0</button>
            <div id="panel1"></div>
            <br>
            <span>vue should render a button and message below.</span>

            <div id="app">
            {{message}}
            <button @click="ok_click()">ok</button>
            </div>

            <script nonce="${nonce}" src="${vue_uri}"></script>
            <script nonce="${nonce}" src="${main_uri}"></script>
            <script nonce="${nonce}" src="${app_uri}"></script>

        </body>
        </html>`;
}

// ------------------------ scriptUri_builder ---------------------------
function scriptUri_builder( 
                    extPath : string, mediaPath : string, scriptFile : string ) : vscode.Uri
{
    // Local path to main script run in the webview
    const scriptPathOnDisk = vscode.Uri.file(
        path.join(extPath, mediaPath, scriptFile)
    );

    // And the uri we use to load this script in the webview
    const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' });

    return scriptUri ;
}

function getNonce()
{
    let text = '';
    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    for (let i = 0; i < 32; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
}

为什么vue.js在vscode扩展Webview中不起作用？

0 个答案: