Vue + Laravel 可以用来制作非单页应用吗？答案

【问题标题】：Can Vue + Laravel be used to make non-single page applications?Vue + Laravel 可以用来制作非单页应用吗？
【发布时间】：2019-11-03 13:24:12
【问题描述】：

我想制作一个使用 Vue.js 和 Laravel 的网站……似乎每个教程都是为了制作 SPA。对于我的特定应用程序，SPA 没有意义。我不明白如何构建我的 Vue 代码，因为它需要在每个页面上创建不同的实例，使用不同的方法等。如果我尝试在每页的基础上实例化一个单独的 vue 实例，我必须每次都在我的请求标头中包含一个 CSRF 令牌，这感觉不对。

使用 vue 的多页面 laravel 应用程序的一般架构是什么？

【问题讨论】：

它只能用于制作非 SPA，SPA 需要 Vue Router，这是另一回事
我尝试向每个页面添加一个新的 Vue 实例，就像你在我之前的问题中所说的那样，但这需要我在每个页面上都包含 CSRF 令牌，而我宁愿将其设置为axios 设置一次在 bootstrap->app.php
CSRF token 是给 axios 的，跟 Vue 实例无关

标签： php laravel vue.js

【解决方案1】：

每个教程都是为了做SPA

默认的 Laravel 5.8 安装预装和配置了 VueJS 没有 SPA

不要使用 Vue 路由器

在 Laravel 6+ 中，通过 laravel/ui 预设的 Vue 配置方式相同

我不明白如何构建我的 Vue 代码

在不同的脚本文件中创建不同的Vue实例，而不是app.js中的一个全局实例

我每次都必须在我的请求标头中包含一个 CSRF 令牌

不，那和 Vue 无关，移动这段代码

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;

到bootstrap.js 并在webpack.mix.js 中编译后将脚本加载到app.blade.php 中

如果您不想在任何地方都包含 app.js，或者只是从该文件中删除 Vue 全局实例

希望对你有帮助

【讨论】：

我已经这样做了，但是当我从页面上的单个脚本进行调用时，我仍然收到 405 Method Not Allowed 错误
405 是当您向 post 路由发出 get 请求时，反之亦然，与实例无关，请显示 axios 调用，以便我们为您提供帮助
您在页面的哪个位置将您的脚本引用标签添加到 app.php？在正文的末尾还是在主布局刀片文件的标题中？
如果您希望脚本在内容之前加载 => 带有 defer 属性的标头，否则在正文末尾（但在其他使用 Vue 的脚本之前）