2017-06-20 12 views
1

私はVue.jsに私のウェブサイトの1ページを書いています。私にはfile.htmlfile.jsがあります。 file.htmlは次のようになります。レンダリング関数にvueテンプレートをプリコンパイルする

<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> 

file.jsは次のようになりながら:私はウェブサイトをロードすると

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

、警告が表示さ:

[email protected]:440 [ヴューを]警告:あなたが が危険-evalのを禁止することをコンテンツセキュリティポリシーを持つ環境でVue.jsのスタンドアロンビルド を使用しているようです。テンプレートコンパイラは、この 環境では動作しません。安全でない評価を可能にするポリシーを緩和するか、 テンプレートをレンダリング関数にあらかじめコンパイルすることを検討してください。

私のアプリケーションでは評価を禁止する必要があります。唯一の方法は、vueコードをプリコンパイルすることです。私はWebpackとBrowserifyを調べましたが、1つのファイルだけをプリコンパイルしたいのですが、それらは非常に複雑で常に1つのアプリケーション全体で使用されています。

これを行う方法はありますか? ありがとうございます。

答えて

1

いいえ、私の知る限りではそれをする方法はありません。 テンプレートを事前にコンパイルするには、単一ファイルコンポーネント(またはjsx)を使用する必要があります。

  • 使用vueifybrowserify

    は、ここで私はあなたの選択肢の包括的なリストを考えています。

  • 使用vue loaderwebpack

  • gulpgulp-vueify2(私のパッケージ)を使用してください。 は、すべてのものをバンドルせずに単一のファイルをコンパイルすることができます(ただし、以前の解決方法の のように、単一のファイルコンポーネントでなければなりません)。 ネイティブモジュールをサポートしない環境では動作しません。 ほとんどのブラウザ(this questionを参照してください)のようなシステムです。

  • 使用jsx module for babel

  • たぶん、あなたはthe core template compilerを使用してカスタムソリューションを想像することができます。

関連する問題