我会离开 Laravel 的方式，使用 Webpack。这使您能够添加一些好的 Webpack 配置。另外gulp watch 现在可以在 Homestead vagrant VM 中工作，因为它将使用 Webpack 来监视文件更改。并查看异步组件。
现在关于每个页面单独的 Vue 实例的问题...让我们从 app.js 开始...
App.js
当你第一次安装 Laravel 5.3 时，你会发现一个 app.js 入口点。让我们注释掉主 Vue 实例：
资源/资产/js/app.js
/**
* First we will load all of this project's JavaScript dependencies which
* include Vue and Vue Resource. This gives a great starting point for
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
// Let's comment this out, each page will be its own main Vue instance.
//
// const app = new Vue({
// el: '#app'
// });
app.js 文件仍然是存放全局内容的地方，因此此处添加的组件（例如上面看到的 example 组件）可用于包含它的任何页面脚本。
欢迎页面脚本
现在让我们创建一个表示欢迎页面的脚本：
资源/资产/js/pages/welcome.js
require('../app')
import Greeting from '../components/Greeting.vue'
var app = new Vue({
name: 'App',
el: '#app',
components: { Greeting },
data: {
test: 'This is from the welcome page component'
}
})
博客页面脚本
现在让我们创建另一个代表博客页面的脚本：
资源/资产/js/pages/blog.js
require('../app')
import Greeting from '../components/Greeting.vue'
var app = new Vue({
name: 'App',
el: '#app',
components: { Greeting },
data: {
test: 'This is from the blog page component'
}
})
问候组件
resources/assets/js/components/Greeting.vue
<template>
<div class="greeting">
{{ message }}
</div>
</template>
<script>
export default {
name: 'Greeting',
data: () => {
return {
message: 'This is greeting component'
}
}
}
</script>
欢迎刀片视图
让我们更新 Laravel 附带的欢迎刀片视图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div id="app">
<example></example>
@{{ pageMessage }}
<greeting></greeting>
</div>
<script src="/js/welcome.js"></script>
</body>
</html>
博客视图的想法是相同的。
灵药
现在，使用 Elixir 将 Webpack 配置选项与其自己的配置选项合并的能力，将它们整合到您的 gulp 文件中（阅读更多关于 here 的信息）：
gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix => {
var config = elixir.webpack.mergeConfig({
entry: {
welcome: './resources/assets/js/pages/welcome.js',
blog: './resources/assets/js/pages/blog.js'
},
output: {
filename: '[name].js' // Template based on keys in entry above
}
});
mix.sass('app.scss')
.webpack('app.js', null, null, null, config);
});
运行gulp 或gulp watch，您将看到welcome.js 和blog.js 都已发布。
想法
当涉及到“网络应用程序”时，我目前正在走 SPA 路线，并且只使用 Laravel 作为后端 API（或任何其他语言/框架）。我见过一些在 Laravel 中构建 Vue SPA 的例子，但我真的认为它应该是一个完全独立的 repo/项目，独立于后端。 SPA 中不涉及 Laravel/PHP 模板视图，因此单独构建 SPA。顺便说一句，SPA 将具有“页面”组件（通常由 VueRouter 调用，当然会由更多嵌套组件组成……请参阅下面的示例项目链接）。
但是，对于“网站”，我认为 Laravel 仍然是提供刀片视图的不错选择，无需为此进行 SPA。您可以执行我在此答案中描述的操作。此外，您可以将您的网站连接到您的网络应用程序。在您的网站上，您将有一个“登录”链接，该链接会将用户从网站带到 webapp SPA 进行登录。您的网站仍然对 SEO 友好（尽管有充分证据表明 Google 也在 SPA javascript 网站上看到了内容）。
为了了解 SPA 方法，我在 Vue 2.0 中提供了一个示例：https://github.com/prograhammer/example-vue-project（效果很好，但仍在进行中）。
编辑：
您可能还想查看Commons Chunk Plugin。这样浏览器可以单独缓存一些共享模块依赖。 Webpack 可以自动提取共享的导入依赖项并将它们放在单独的文件中。这样您就可以在页面上同时拥有common.js（共享的东西）和welcome.js。然后在另一个页面上，您将再次拥有common.js 和blog.js，并且浏览器可以重用缓存的common.js。