CSPで 'unsafe-eval'を使用しないVuejsブラウザ拡張

Question

私はVuejsを使用してブラウザアドオンを構築し、Laravel Mixをビルドプロセスとして使用しました。

私のvueテンプレートはすべて単一のファイルコンポーネントであり、すべてが完全に正常です...私のアドオンマニフェストのCSPから 'unsafe-eval'を削除するまでは。 Firefoxがエラーを示しています。

Content Security Policy: The page's settings blocked the loading of a resource...Source: call to eval() or related function blocked by CSP.

LaravelミックスのWebPACKとVUE-ローダーを使用していますが、私はこれが作成するバンドルがCSPに準拠しているという印象の下にありました。

私は構築されたJSを見てきましたが、eval()への呼び出しはないようですが、問題の原因と思われるnew Function()コールがあります。

私はここで何かが欠けていますか？

Answer 1

私は単純なものがありませんでした。

基本的に私はとても気に入りの実行時のビルドを使用するようにWebPACKのを構成するために必要な：ルートコンポーネントではなく、HTML要素を使用してVUEインスタンス化後

mix.webpackConfig({ 
    resolve: { 
     alias: { 
      'vue$': 'vue/dist/vue.runtime.js' 
     } 
    } 
}); 

：

const root = require('my-root-component.vue'); 
const app = new Vue({ 
    el: '#app', 
    render: createElement => createElement(root), 
}); 

私が得ましたここで答えます：https://github.com/JeffreyWay/laravel-mix/issues/1052