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

Posted 2023-02-22

【中文标题】Laravel 5.3 - Vue 2 在页面重新加载时闪烁

【英文标题】：Laravel 5.3 - Vue 2 flickering on page reload

【发布时间】：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 警告]：无法挂载组件：未定义模板或渲染函数。 （在根实例中找到）

这可能是什么问题？

【问题讨论】：

你的控制台有错误吗？

我现在加了！

【参考方案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