Laravel 5.3 - ページ再読み込み時に2回点滅する

Question

私のページを再読み込みするたびに、私のVueコンテンツを表示する代わりに、表示されてすぐに解散（ちらつき）します。

マイapp.jsファイル：

require('./bootstrap'); 

var Vue = require('vue'); 

new Vue({ 
el: '#root', 
data: { 
    message: 'Hello world!' 
} 
}); 

マイビュー：

<div id="root"> 
    <input type="text" v-model="message"> 
    <p>The value of the input is: @{{ message }}</p> 
</div> 

Vueのコンソールエラー：ここで問題になる可能性がどのような

[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

？

Answer 1

runtime-onlyビルドを使用しているようですので、レンダリング機能を提供するか、standalone buildを取得する必要があります。私はあなたがすべてを稼働させていることを推測しているので、あなたはあなたのアプリをどのようにデザインするのかを決める必要があります。あなたはあなただけで、それを引っ張って、あなたのwebpack configにエイリアスを追加する必要があるので、あなたはstandalone buildが必要になりますbladeテンプレートを使用したい場合は

（参照：https://github.com/JeffreyWay/laravel-elixir-webpack-officialを）：

resolve: { 
    alias: { 
    'vue$': 'vue/dist/vue.common.js' 
    } 
} 

それともあなたがしている場合をあなたはpackage.jsonに以下を追加する必要がありbrowserify使用：

"browser": { 
    "vue": "vue/dist/vue.common" 
} 

Laravel 5.4になりましLaravel mixで（箱から出してこれを行います）、あなたの5.3バージョンのように見えます。

あなたが.vueファイルを使用して構築し、SPAは、あなたがruntime-onlyビルドを使用し、レイアウトでApp.vueファイルを作成し、代わりにそれをマウントすることができますしたい場合：

var Vue = require('vue'); 
var App = require('./components/App.vue'); 

const app = new Vue({ 
    render: h => h(App) 
}).$mount('#app'); 

あなたはより多くのために、この答えをチェックアウトすることができますあなたがこのルートを下りたい場合は、Updating elements outside of a component