在laravel里使用Vue实现简单的单页模式

77 阅读 0 评论 51 点赞

我是靠谱客的博主畅快睫毛，最近开发中收集的这篇文章主要介绍在laravel里使用Vue实现简单的单页模式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

在控制器里写入下面的代码

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

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?}', [AppHttpControllersPages::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>