我会离开Laravel谈到，随着的WebPack的方式。这使您可以添加一些良好的Webpack配置。 Plus gulp watch现在在Homestead vagrant虚拟机内工作，因为它将使用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 /页/欢迎。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 /页/ 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'
}
})
问候组件
个资源/资产/ JS /组件/ 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>
这个想法是博客视图也一样。
药剂
现在你一饮而尽文件中使用药剂的能力，有自己的（阅读更多有关here）合并的WebPack配置选项把它们放在一起：
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（或任何其他语言/框架）。我已经看到了一些例子，其中的Vue SPA是建于Laravel，但我真的认为这应该是一个完全独立的回购/项目，独立的后端。 SPA中没有涉及Laravel/PHP模板视图，因此需要单独构建SPA。顺便说一句，在SPA会有“页”部件（其通常由VueRouter，当然所谓的会由多个嵌套组件的...看我下面的示例项目链接）。
但是，对于“网站”我认为Laravel仍然是服务于刀片意见和没有必要去SPA应该是一个不错的选择。你可以做我在这个答案中描述的。此外，您可以将您的网站连接到您的网络应用程序。在您的网站，你将有一个“登录”链接，将采取从网站用户webapp的SPA登录。您的网站仍然是搜索引擎友好的（虽然有很好的证明，谷歌看到的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。
值得一提的是'php artisan make：auth'支持使用捆绑的“app.js”和“app.scss”的布局和视图...... –