Laravel 10.x 安装 Inertiajs & Vue3

hi，我是温新，一名 PHPer

按照官方文档来安装，大概率会被坑一下。本篇文章将会提醒哪一个地方有坑点，确保安装上。

第一步：安装 Laravel

<span style="color: rgb(0, 176, 240);">composer create-project laravel/laravel la10-inertia-study</span><br></br>

第二步：安装 inertiajs

<span style="color: rgb(0, 176, 240);">composer require inertiajs/inertia-laravel</span><br></br>

第三步：创建根模板组件

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">resources\views\app</span>.<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">blade</span>.<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">php</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">DOCTYPE</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">html</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">html</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">head</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">meta</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">charset</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"utf-8"</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">meta</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"viewport"</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">content</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"width=device-width, initial-scale=1.0, maximum-scale=1.0"</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">@vite</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'resources/js/app.js'</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">@inertiaHead</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">head</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">body</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">@inertia</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">body</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">html</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span>

第四步：创建中间件

1、创建中间件

<span style="color: rgb(0, 176, 240);">php artisan inertia:middleware</span><br></br>

2、注册中间件

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// app\Http\Kernel.php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'web'</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// ...</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">\App\Http\Middleware\HandleInertiaRequests</span>::<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">],</span>

第五步：安装 vue3

<span style="color: rgb(0, 176, 240);">npm install @inertiajs/vue3</span><br></br>

第六步：初始化 vue

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// resources\js\app.js</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'./bootstrap'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span> { <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">createApp</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h</span> } <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'vue'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span> { <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">createInertiaApp</span> } <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'@inertiajs/vue3'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">createInertiaApp</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">resolve</span>: <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">name</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">const</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">pages</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">meta</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">glob</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'./Pages/**/*.vue'</span>, { <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">eager</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">true</span> })</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">pages</span>[<span style="box-sizing: border-box;color: rgb(128, 203, 196) !important">`./Pages/${</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">name</span><span style="box-sizing: border-box;color: rgb(128, 203, 196) !important">}.vue`</span>]</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">setup</span>({ <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">el</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">props</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">plugin</span> }) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">createApp</span>({ <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">render</span>: () <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">h</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">props</span>) })</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            .<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">use</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">plugin</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            .<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">mount</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">el</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">})</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span>

第七步：安装解析 vue 模板插件

这个地方是一个坑，若不安装将无法解析 vue 文件

<span style="color: rgb(0, 176, 240);">npm i @vitejs/plugin-vue</span><br></br>

第八步：配置 vite.config.js 解析 vue 文件

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// la10-inertia-study\vite.config.js</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">import</span> { <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">defineConfig</span> } <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'vite'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">import</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">laravel</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'laravel-vite-plugin'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">import</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">vuePlugin</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"@vitejs/plugin-vue"</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">export</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">default</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">defineConfig</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 根据自己的需求配置</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">server</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">host</span>: <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'192.168.31.90'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">port</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">5173</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 是否开启 https</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">https</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">false</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">plugins</span>: [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">laravel</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">input</span>: [<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'resources/css/app.css'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'resources/js/app.js'</span>],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">refresh</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">true</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        }),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">vuePlugin</span>(),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    ],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">});</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span>

由于我是在虚拟机中进行开发的，若不配置 server 将会存在跨域问题。

第九步：创建 vue 文件

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span><span class="cm-meta cm-mustache" style="box-sizing: border-box;color: rgb(224, 108, 117) !important">{{ name }}</span><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">setup</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// resources\js\Pages\Index.vue</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">const</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">name</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'hello inertia.js'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span>

第十步：配置路由

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">get</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'/'</span>, <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">inertia</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Index'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">});</span>

第十步：测试

<span style="color: rgb(0, 176, 240);">npm run dev</span><br></br>