2017-06-20 2 views
1

Ich schreibe eine einzelne Seite meiner Website in Vue.js. Ich habe eine file.html und eine file.js. file.html sieht wie folgt aus:Precompile vue Vorlage in Render-Funktionen

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
<body> 
    <div id="app"> 
    // everything to be displayed on the page (data, v-if & v-else tags etc.) 
    </div> 
</body> 

während file.js sieht wie folgt aus:

new Vue({ 
    el: '#app', 
    data: { 
     msg: "hello", 
     // some other data 
    } 
}); 

Wenn ich die Website zu laden, wird eine Warnung angezeigt:

[email protected]: 440 [Vue warnen]: Es scheint, dass Sie den eigenständigen Build von Vue.js in einer Umgebung mit Inhaltssicherheitsrichtlinie verwenden, die unsafe-eval verbietet. Der Vorlagencompiler kann in dieser Umgebung nicht arbeiten. Ziehen Sie in Betracht, die Richtlinie zu lockern, um unsafe-eval oder das Vorkompilieren Ihrer Vorlagen in Renderfunktionen zu ermöglichen.

Ich muss Eval in meiner Anwendung nicht zulassen, so ist der einzige Weg, die Vue-Codes vorkompilieren. Ich habe Webpack und Browserify nachgeschlagen, aber sie scheinen ziemlich komplex zu sein und werden immer mit einer ganzen Anwendung verwendet, während ich nur eine einzige Datei vorkompilieren möchte.

Gibt es eine Möglichkeit, es zu tun? Vielen Dank im Voraus.

Antwort

1

Nein, es gibt keine Möglichkeit, das zu tun, soweit ich weiß. Um Vorlagen vorkompilieren zu können, müssen Sie einzelne Dateikomponenten (oder jsx) verwenden. Hier

ist Ich denke, eine umfassende Liste Ihrer Alternativen:

  • Verwenden browserify mit vueify.

  • Verwenden Sie webpack mit vue loader.

  • Verwenden Sie gulp mit gulp-vueify2 (mein Paket). Es ermöglicht Ihnen, kompilieren Sie eine einzelne Datei ohne Bündelung der ganzen Sache (aber wie die früheren Lösungen, es muss eine einzelne Dateikomponente sein), aber es ist ziemlich schwierig in einer Umgebung arbeiten, die ein natives Modul nicht unterstützt System, wie die meisten Browser (siehe this question).

  • Verwenden Sie die jsx module for babel.

  • Vielleicht können Sie sich eine benutzerdefinierte Lösung mit the core template compiler vorstellen.

Verwandte Themen