Laravel 5.3 - Vue 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。我猜您刚刚准备好一切运行，因此您需要决定如何设计您的应用程序。

如果你想使用 blade 模板，那么你将需要 standalone build，所以你只需要为你的 webpack config 添加一个别名以将其引入（参见：https://github.com/JeffreyWay/laravel-elixir-webpack-official):

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

或者，如果您使用的是 browserify，则需要将以下内容添加到 package.json：

"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');

如果您想沿着这条路线走下去，可以查看此答案以获取更多信息：

Laravel 5.3 - Vue 2 flickering on page reload