Почему vue.js не работает в расширении vscode? - PullRequest
Новая
       24

Почему vue.js не работает в расширении vscode?

0 голосов
/ 17 мая 2019

Я хотел бы использовать vue.js в веб-представлении расширения vscode. Я хочу использовать привязку данных vue.js для создания HTML веб-просмотра. Я могу включить vue.js как файл сценария в HTML-код веб-просмотра. И Vue монтирует на DIV. Даже функция монтирования работает. Но ничего не отображается.

Имеет ли это отношение к веб-представлению, реализуемому как iFrame?

Вот репозиторий github, содержащий проект расширения vscode, который иллюстрирует проблему: https://github.com/lae0901/vscode-vue-webview-problem

Вот код, который строит 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;
}
...