Laravel + Vue 3 (Vite、TypeScript) SPA 设置全攻略

嘿，小伙伴们！在咱们现代的 Web 开发世界里呀，单页应用（SPA）可火啦！为啥呢？因为它能给用户带来超流畅的体验，而且开发起来也超高效。今天呢，我就来带着大家一起，用 Laravel 这个超厉害的后端框架，搭配上 Vue 3 这个灵活又好用的前端框架，再加上 Vite 这个快速构建工具和 TypeScript 这个静态类型语言，打造一个超酷的 SPA 应用。是不是很期待呀？那咱们就赶紧开始吧！

第1步：创建 Laravel 项目

操作步骤

咱们得用 Composer 这个 PHP 依赖管理工具来创建 Laravel 项目哦。就像这样，在终端里敲上这么一行命令：

composer create-project laravel/laravel laravel-vue-manual

这行命令呢，就会在咱们当前的目录下面，创建一个叫 laravel-vue-manual 的新 Laravel 项目啦。Composer 会自动去下载那些 Laravel 要用的所有依赖包，然后把项目的基本架子都搭好，可方便啦！

原理与意义

Laravel 就像是一个超级百宝箱，里面有好多好用的工具和功能呢，像路由系统呀、数据库操作呀、身份验证啥的，这些都能给咱们后端开发打下超级坚实的基础。用 Composer 来创建项目呢，能保证咱们项目里的依赖都是整整齐齐、规规矩矩的，以后不管是自己接着开发，还是和小伙伴们一起合作，都能特别方便。

第2步：设置前端

使用 yarn 创建 Vite 项目

现在呢，咱们在 Laravel 项目的目录里，要用 yarn 这个命令来创建一个基于 Vite 的前端项目哦。就敲上这么一句：

yarn create vite

敲完之后呢，它会让咱们给项目取个名字，咱们就叫它 FrontEndApp 。然后呢，还要选框架，咱们就选 Vue ，语言呢，选 TypeScript 。选好啦，就进入 FrontEndApp 这个目录，再敲上 yarn 或者 yarn install ，这样就能把项目要用的那些依赖项都安装好啦。

配置 Vite

在 FrontEndApp 目录里，找到那个 vite.config.ts 文件，咱们要给它配置配置。代码长这样：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default (({ mode }) => {// 这里是看看现在是不是开发模式哦const isDevelopment = mode === "development";return defineConfig({server: {// 开发的时候，服务器会监听 3000 端口哦port: 3000,},build: {// 等把项目构建好了，文件就会放到这里哦outDir: "../public/app",},// 根据是不是开发模式，来改一下基础路径哦base: isDevelopment? "/" : "/app/",// 加上这个插件，就能支持 Vue 3 项目的构建啦plugins: [vue()]});
});

这段代码呢，首先会看看现在是不是在开发模式。要是在开发模式下呢，Vite 服务器就会去监听 3000 端口，而且资源路径的基础就设成根路径 / 。要是到了生产模式呢，构建好的文件就会输出到 Laravel 项目根目录下面的 public/app 文件夹里，资源路径的基础就变成 /app/ 啦。还有哦，这里加上了 @vitejs/plugin-vue 这个插件，就是为了能让它支持咱们的 Vue 3 项目构建呢。

修改 build 脚本

再打开 FrontEndApp 目录里的 package.json 文件，把 build 脚本改一改：

{"scripts": {"dev": "vite","build": "vue-tsc --noEmit && vite build --emptyOutDir","preview": "vite preview"}
}

这里面的 vue-tsc --noEmit 呢，就是在构建之前，去检查一下 TypeScript 代码的类型对不对，但是不会真的生成编译文件哦。vite build --emptyOutDir 就是用 Vite 来构建项目，而且在构建之前，会把输出目录先清空呢。当咱们在 FrontEndApp 目录里敲上 yarn build ，就会在 Laravel 项目根目录的 public 文件夹里，创建一个叫 app 的文件夹，把构建好的前端资源文件都放进去。

第3步：设置 Laravel 路由

接下来，打开 routes/web.php 文件，来编辑一下路由配置哦。代码是这样的：

<?phpuse Illuminate\Support\Facades\Route;Route::get('/', function () {// 这里就是说，访问根路径的时候，就返回 Laravel 默认的欢迎视图哦return view('welcome');
});Route::get('/app/{any}', function () {// 先找到构建好的前端 index.html 文件的路径哦$path = public_path('app/index.html');// 检查一下这个文件存不存在，要是不存在就返回 404 错误哦abort_unless(file_exists($path), 404, 'Page is not Found!');// 要是文件存在，就把文件内容读出来返回哦return file_get_contents($path);
})->name('FrontEndApp');

这里面第一条路由 Route::get('/',... 就是说，当有人访问根路径 / 的时候，就会返回 Laravel 默认的那个欢迎视图，就是咱们一打开项目能看到的那个页面啦。第二条路由 Route::get('/app/{any}',... 可重要啦，它能匹配所有以 /app/ 开头的路径。在这个路由的函数里面呢，先去找构建好的前端 index.html 文件的路径，然后看看这个文件在不在，要是不在就给人家返回 404 错误，要是在呢，就把文件内容读出来返回。这样啊，当咱们在浏览器里输入 http://127.0.0.1:8000/app ，就能看到咱们用 Vue 3 做的 SPA 应用跑起来啦！

第4步：设置脚本

安装 concurrently

为了能同时运行好几个命令，咱们得装一个叫 concurrently 的工具哦。在项目根目录里敲上这么一句：

yarn add -D concurrently

concurrently 这个工具可厉害啦，能让咱们在终端里同时跑好几个命令，这样在开发的时候，就能一边启动后端的 Laravel 服务，一边启动前端的开发服务器，可方便啦！

添加脚本到 package.json

在项目根目录的 package.json 文件里，加上下面这些脚本：

{"scripts": {"front:serve": "cd FrontEndApp && yarn dev","front:build": "cd FrontEndApp && yarn build","serve": "concurrently \"php artisan serve --port=8000\" \"yarn front:serve\"","deploy": "yarn setup && yarn front:build && php artisan migrate"}
}

• front:serve 这个脚本呢，就是进到 FrontEndApp 目录里，然后启动 Vite 开发服务器。
• front:build 脚本就是进到 FrontEndApp 目录里，把前端项目给构建一下。
• serve 脚本用 concurrently 同时跑了 php artisan serve --port=8000 ，这是启动 Laravel 开发服务器，监听 8000 端口，还跑了 yarn front:serve ，就是启动前端开发服务器。这样咱们在开发的时候，前后端服务就能一起用啦。
• deploy 脚本呢，是在部署的时候用的。它会先执行 yarn setup ，要是有啥初始化操作的话，然后构建前端项目，最后执行数据库迁移。

咱们敲上 yarn serve ，就能同时启动 Laravel 后端服务（在 127.0.0.1:8000 ）和前端 Vue 3 开发服务器（在 localhost:3000 ）。等前端开发完了，敲上 yarn deploy ，就能构建前端，还能执行数据库迁移这些部署的操作啦。

总结

好啦，小伙伴们！通过这四个步骤，咱们就成功搭好了一个基于 Laravel + Vue 3（Vite、TypeScript）的 SPA 项目啦！从最开始创建 Laravel 项目，到慢慢设置前端项目、配置路由，再到添加脚本，每一步都给咱们这个超酷的 SPA 应用打下了基础哦。在以后实际开发的时候呢，咱们还能接着扩展和优化这个项目，比如给 Laravel 加上更多厉害的功能，把 Vue 3 组件变得更丰富，或者把 Vite 配置得更完美，这样就能满足各种各样不同的业务需求啦。希望这篇文章能给大家在开发 SPA 应用的时候，带来特别清楚的指引和帮助哦！加油，咱们都是超棒的开发者！