如何在 Laravel 10 项目中使用 Vue3 和 Vue Route

作为一个啥都要干的「全栈码农」，前端开发一直以来是我的一块心病，特别是打包工具。从最开始不需要这类工具，到出现了压缩和混淆的辅助命令，再到 Glup，以及 Webpack 这类自动化构建工具的出现，给我的感觉是越来越复杂。Webpack 没支棱几年，Rollup 和 Vite 又横空出世……，我乏了。

问题在于作为打包工具，往往只需要在项目开始时配置好，后续基本都不会再关注它。时间一长，再开始新项目时又会忘了之前的操作流程。如果是继续使用同一个打包工具还好，直接从老项目中复制一份打包配置文件过来就行了。但如果碰到打包工具不一样时，就又得重来一遍。比如我一直在用的 Laravel 开发框架，目前就是这种情况。

Laravel 框架版本在 9 之前，用的是基于 Webpack 二次开发的 Mix 打包工具。从 9 开始，前端打包工具换成了 Vite。之前浅尝辄止的体验过一次 Vite，的确很快，但要和后端项目混合集成有点繁琐，个人感觉没有 Webpack 灵活，所以也没多大意愿想要用 Vite。这次开启了基于 Laravel 10 的新项目，为了不给之后的系统升级埋坑，不想动框架默认的设定。在这样的前提下，不了解一下 Vite 是不行了。

好在 Laravel 已经完成了基础的集成工作，按照官方文档的流程尝试了一下，顺利的达成了目的。本文以使用 Vue 3 + Vue route 为例子，记录了在 Laravel 10 中开始新项目的前端基础流程。分享之余，也算是给自己留个备忘。

首先用 PHP 的包管理命令 composer 创建一个新的 Laravel 10 基础项目：

composer create-project laravel/laravel zzxworld-new-app

进入项目目录，安装默认引用的前端包：

npm install

如果命令卡在这里执行不了，说明需要使用 npm 命令镜像。通过 --registry 参数添加国内镜像地址后再试试：

npm install --registry=https://registry.npmmirror.com

关于 npm 命令的镜像配置方式和可用的镜像源地址，可以参考这篇文章：

给 NPM 命令配置国内镜像源NPM 命令镜像使用方法和国内可用的镜像地址列表。

继续使用 npm 命令引入 Vite 的 Vue 扩展，Vue3 和 Vue Route 到项目中：

npm install --save-dev @vitejs/plugin-vue vue@3 vue-router@4

如果项目开发环境使用的访问地址不是 http://localhost，还需要在修改 .env 配置文件中的 APP_URL：

APP_URL=http://laravel.zzxworld.local

编辑项目示例用的 /resources/views/welcome.blade.php 文件，在 <body> 标签中添加 Vue 的容器标签和 JS 入口引用代码:

<div id="app"></div>
@vite(['resources/js/app.css', 'resources/js/app.js'])

这里使用 @vite 方法引用前端资源时需注意路径，它不是像常规方法那样直接使用打包好的文件路径，而是引用的源代码文件路径。

最后编辑 vite.config.js，这是 Vite 的打包配置文件，需要在里面引用 Vue 扩展。在配置中添加以下代码:

// ...
import vue from '@vitejs/plugin-vue';

// ...
    plugins: [
// ...
        vue(),
    ],
// ...

这样就完成了在 Laravel 10 中使用 Vue3 和 Vue Route 的打包配置设置。整一个简单的 Vue route 页面跳转示例看看效果。在 resources/js/ 目录下分别添加以下文件和代码：

/resources/js/App.vue:

<template>
    <h1>Hello, Laravel 10</h1>
    <router-view></router-view>
</template>

/resources/js/Home.vue:

<template>
    <h2>This is the Homepage.</h2>
    <router-link to="/about">About</router-link>
</template>

/resources/js/About.vue:

<template>
    <h2>This is the about page.</h2>
    <router-link to="/">Homepage</router-link>
</template>

然后编辑 /resources/js/app.js 文件，改成如下代码：

import { createApp } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router';
import App from './App.vue';

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/', component: () => import('./Home.vue') },
        { path: '/about', component: () => import('./About.vue') },
    ],
});

const app = createApp(App);
app.use(router);

app.mount('#app');

然后运行本地开发打包命令：

npm run dev

等待命令初始化完成，就可以在浏览器中通过网址查看执行效果。就是个打包工具，对我这种小项目总体而言在使用体验和打包效率方面，和使用 Webpack 没有太大差距。不过值得一提的是 Vite 自带了「热加载」功能。这个功能会在编辑完代码并保存后，会自动刷新当前页面。省去了之前每次编辑完代码还需要手动去点刷新的操作，算是一个比较人性化的功能点。

如何在 Laravel 10 项目中使用 Vue3 和 Vue Route

上一篇

下一篇