Laravel 5.3 - Vue 2在页面重新加载时闪烁

时间:2017-02-22 11:51:19

标签: javascript laravel vue.js flicker

每次我重新加载页面时,都会显示然后快速消失(闪烁),而不是显示我的Vue内容。

我的app.js文件:

var json = {
    'key': 'project[maximum_contract_amount_estimated_completion_date]',
    'value': '2017-02-22'
};
var a = json.key.match(/^(.*)\[(.*)\]/);
window[a[1]] = window[a[1]] || {};
window[a[1]][a[2]] = json.value;

我的观点:

require('./bootstrap');

var Vue = require('vue');

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

Vue控制台错误:

  

[Vue警告]:无法安装组件:未定义模板或渲染功能。       (在根实例中找到)

这可能是什么问题?

1 个答案:

答案 0 :(得分:0)

看起来您正在使用runtime-only构建,因此您需要提供渲染功能或拉入standalone build。我猜你只是让一切都正常运行,所以你需要决定如何设计你的应用程序。

如果您想使用blade模板,则需要standalone build,因此您只需要为webpack config添加别名即可将其拉入(请参阅:{{3 }}):

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文件和build和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');

如果您想沿着这条路走下去,可以查看此答案以获取更多信息:https://github.com/JeffreyWay/laravel-elixir-webpack-official