【问题标题】:Laravel 5.3 - Vue 2 flickering on page reloadLaravel 5.3 - Vue 2 在页面重新加载时闪烁
【发布时间】:2017-07-12 10:48:03
【问题描述】:

每次我重新加载我的页面时,它不会显示我的 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 警告]:无法挂载组件:未定义模板或渲染函数。 (在根实例中找到)

这可能是什么问题?

【问题讨论】:

  • 你的控制台有错误吗?
  • 我现在加了!

标签: javascript laravel vue.js flicker


【解决方案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');

如果您想走这条路,可以查看此答案以获取更多信息:Updating elements outside of a component

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-19
    • 1970-01-01
    • 1970-01-01
    • 2012-09-03
    • 2011-03-05
    • 1970-01-01
    相关资源
    最近更新 更多