Laravel 建置 Vue.js 和 Vue Router 的 SPA 網站
在 Ubuntu Server 環境使用 Laravel 的 laravel/ui 套件，建置 Laravel 和 Vue.js 連動 Vue Router，並將 Laravel 所有 routes 指向主要 Component，來完成 Laravel、Vue.js 和 Vue Route 的 SPA 網站。
安裝
laravel/ui 套件
composer require laravel/uinpm
sudo apt indatll npmui 和 Vue.js 套件
這個 laravel/ui 套件有一些有用的 artisan 指令，它能自動建置開始使用 Vue 所需的一切。
php artisan ui vueVue Route
安裝 Vue.js 路由套件 Vue Route：
sudo npm install vue-router --save-dev新版本的 Node.js
因 Node.js 會有版本須 >= 12 以上限制，所以這裡安裝較新版本的 Node.js LTS (v14.x) ：
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejsMax 額外的依賴項
安裝添加依賴項目，並編譯：
npm run dev
npm install && npm run devLaravel Vue.js 設定
Vue 的結構就是由各個 Components 組成，因此一開始要在該目錄下建立所需頁面的 Component。
在 resources/js/components/ 建立一個頁面 Home.vue (直接複製原提供的 ExampleComponent.vue 修改即可)：
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Home</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>新增 Vue.js 的路由 Vue Route
Component Home.vue 建立完成後，就可以設定 Vue.Router 了，新增 resources/js/router.js：
import Vue from 'vue';
import Router from 'vue-router';
// 引用頁面的 Component
import Home from './components/Home.vue';
// 使用 Vue Router
Vue.use(Router);
// Route 設定
export const routes = [
{ path: '/home', component: Home, name: 'home' },
];
// 建立 Vue Router instance
const router = new Router({
mode: 'history',
routes
});
export default router;Vue 主要頁面與 Vue Route 連動
修改 resources/js/app.js，主要是新增 7, 8, 36 行。
建立新的 Vue.js component resources/js/components/Home.vue 檔案後，需要向 Vue 註冊它 (第 26 行)。
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
import Vue from 'vue';
import router from './router.js';
require('./bootstrap');
window.Vue = require('vue').default;
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('home', require('./components/Home.vue').default);
/**
* 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.
*/
const app = new Vue({
el: '#app',
router
});Laravel 和 Vue 連動
Vue 都設定完成後，要在 Laravel Blade 頁面引入 Vue.js 物件，新增 resources/views/index.blade.php，作為預設首頁
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div id="app">
<div class="links">
<!-- 建立 Vue Router 連結-->
<router-link to="/home">Home</router-link>
</div>
<!-- Vue Router 代入的內容 -->
<router-view></router-view>
</div>
<!-- 引入 Vue app -->
<script src="/js/app.js"></script>
</body>
</html>Laravel routes 指向設定
將 Laravel 所有 routes 都指向上述建立的 index.blade.php，設定 routes/web.php：
// 將除了 api prefix 的 request 都導向 index.blade.php
Route::get('/{path}', function () {
return view('index');
})->where('path', '^((?!api).)*$');測試結果
注意是否己經執行了：
npm install接著只要執行此指令，即可在修改同時即時編譯，並且也能與 Chrome Vue Devtools 連動：
npm run watch
參考
本著作係採用創用 CC 姓名標示-相同方式分享 3.0 台灣 授權條款授權.
