php版本：7.3.9
nginx版本：1.15.11
laravel版本：8.83
用composer创建一个laravel项目， 取名为test
composer create-project laravel/laravel test
进入test项目文件夹， 运行 composer install 补全依赖文件。
运行npm install生成node_modules依赖文件
如果出现报错 Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to allocate 4096 bytes) 则说明composer版本太低， 运行composer self-update或者composer self-update --2升级后再执行composer install
新建一个控制器， 取名为Pages
php artisan make:controller Pages
在控制器里写入下面的代码
<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;class Pages extends Controller
{
public function index(){
return view('spa');
}
}
然后在resources/views文件夹里创建一个试图文件spa.blade.php 写入下面的代码
重点是<div id="app"></div> 指定要挂载的元素， 和 <script src="/js/app.js"></script> 引入js文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SPA测试</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script src="/js/app.js"></script>
打开laravel项目的路由文件routes/web.php， 删除默认路由， 修改成下面的，把laravel默认的路由都导入我们的单页面。
Route::get('/{any?}', [App\Http\Controllers\Pages::class,'index']);
在laravel的webpack.mix.js文件中加入vue()方法，如下
const mix = require('laravel-mix');mix.js('resources/js/app.js', 'public/js').vue()// 这里加入vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
如果没有node.js环境， 就到官网去下载安装https://nodejs.org/en
在laravel项目文件夹命令窗运行下面的代码安装vue
npm install vue
安装vue-loader
npm install vue-loader
安装vue-router
npm install vue-router
在resources/js/app.js文件中加入下面的代码， 引入Vue和VueRouter并且实例化。 也引入路由文件routes.js, 【注意，引入的路径都必须是相对路径，如“./routes”， 而不能是“/js/routes.js”， 否则编译后会出问题】
require('./bootstrap');
import {createApp} from 'vue';
import {createRouter,createWebHistory} from 'vue-router';
import {routes} from './routes'; //引入自己写的vue路由
import App from './components/App.vue';
export const router = new createRouter({
base:'/',
history: createWebHistory(),
routes
})
createApp(App).use(router).mount('#app')
在resources/js文件夹里新建一个vue路由文件 routes.js ，并且在routes.js里面引入各个组件的文件，分别对应各个路由。
import Home from './components/home.vue'
import About from './components/about.vue'export const routes = [
{
path: '/',
component: Home
},
{
path:'/about',
component: About
}
];
resources/js里面创建一个文件夹components专门放vue组件，并且在里面新建三个组件， App.vue,home.vue, about.vue
App.vue
<template>
<header>我是header部分</header>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">about</router-link>
</nav>
<router-view></router-view>
<footer>这里是footer部分</footer>
</template><script>
export default {
name: "App"
}
</script><style scoped>
a{
margin:20px;
}
</style>
Home.vue
<template>
<div>
<h1>我是Home界面组件</h1>
</div>
</template><script>
export default {
name: "Home"
}
</script>
about.vue
<template>
<div>
<h1>我是About界面组件</h1>
</div>
</template><script>
export default {
name: "about"
}
</script>
然后运行npm run dev命令编译js文件， 然后打开http://localhost/。
补充1
如果vue版本是2.x的， app.js的代码应该修改成下面的
require('./bootstrap');
window.Vue= require('vue').default;
import VueRouter from 'vue-router';
import {routes} from './routes';
Vue.use(VueRouter)
import App from './components/App.vue';
export const router = new VueRouter({
base:'/',
mode:'history',
routes
})
const app = new Vue({
el: '#app',
router,
});
补充2
单页模式的时候直接输入非主页的URL会无法访问网页，为了解决这个问题， 可以在服务器上设置
如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.php相同的页面，具体如下：
Nginx
location / {
try_files $uri $uri/ /index.php;
}
Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
发表评论 取消回复