Silexやその他のPHPフレームワークでVue2環境を設定する方法

Question

ローカル開発環境でSilexフレームワークアプリケーションを実行するようにVue2を設定しようとしています。 CLIツールを使ってVueアプリケーションを作成しました。 /build/dev-server.jsの公開URLをhttp://localhost/+portからhttp://localhost/に変更しました。npm run devはSilexアプリケーションを開きます。そして、次のスクリプトのURLを追加しました：http://localhost:8080/app.js PHPビュー。

npm run devを実行すると、ブラウザの新しいタブがURL http://localhost/で作成されます。 Vueアプリケーションが実行され、私のコンテンツが表示されます（webpack devサーバーが実行されます）。問題は、ホットリロードしないということです。私がブラウザのコンソールをチェックするとき、私はそのアプリケーションが常にhttp://localhost/__webpack_hmrを開こうとしているのを見ます。

そこで質問ですが、それはhttp://localhost:8080でホットリロードとhttp://localhost:80とWebPACKのdevのサーバー上サイレックスフレームワークと連携し、まだ私は使用http://localhost/

Answer 1

を開くことによって、アプリケーションを実行することができるようになりますので、Vueの開発環境を設定する方法Laravelしかし、実際にセットアップでLaravelに固有のものはありませんので、ファイルが保存されている場所に合わせて調整してください。

まず、あなたのスクリプトはwebpack-dev-serverからロードされていますので、

<script src="http://localhost:8080/app.js"></script> 

これは実際には環境変数に基づいて条件付きで配置されているため、開発システムでのみこれを行い、バンドルされたjsを本番環境に読み込みます。

次に、webpack dev configのapp.jsがwebpack-dev-serverから提供されていることを確認する必要があります。それだから私のapp.jsファイルがに対する相対ここで私もpublic/jsへのパスを設定している私の目的のためには

output: { 
    path: path.resolve(__dirname, '../../../public/js/'), 
    publicPath: 'http://localhost:8080/js/', 
    filename: 'app.js' 
}, 

：あなたはpublicPathを使用して、あなたのJavaScriptファイルがから提供されているディレクトリを指すべきことを行うことができますwebpackの設定では、silexにjsファイルがバンドルされている場所に設定してください。

さて、あなただけのdevのサーバーを設定したい：

devServer: { 
    hot: true, // this enables hot reload 
    headers: { "Access-Control-Allow-Origin": "*" }, 
    host: "localhost", 
    port: 8080, 
    contentBase: path.join(__dirname, "../../../public"), // points to Laravel public folder 
}, 

私はその後、npm-run-allを使用してpackage.jsonにNPMのスクリプトを追加 - もう一度、私は私のPHPサーバーのpublicフォルダを指しています：

"scripts": { 
    "serve": "php -S localhost:80 -t public, 
    "hmr": "webpack-dev-server --env=webpack.dev", 
    "dev": "npm-run-all --parallel hmr serve" 
} 

今、あなただけ行うことができるはず：

npm run dev

両方のサーバーを起動し、サイトにアクセスするhttp://localhost:80