下面由给大家介绍Laravel如何安装inertia vue3的版本，希望对大家有所帮助！
一、安装前要求
1.1 已安装laravel框架
1.2 已安装Node JS
1.3 已安装Npm包管理工具
二、服务端配置
2.1 第一步：composer安装inertia-laravel
composerrequireinertiajs/inertia-laravel
2.2 第二步：laravel目录resouces/views/新增app.blade.php文件，加入以下代码
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0"/><linkhref="{{mix('/css/app.css')}}"rel="stylesheet"/><scriptsrc="{{mix('/js/app.js')}}"defer></script></head><body>@inertia</body></html>
2.3 第三步：执行 artisan 命令，添加中间件
phpartisaninertia:middleware
文件生成后，手动添加到 Kernel 文件中的 web 中间件组最后一行
'web'=>[//…\App\Http\Middleware\HandleInertiaRequests::class,],三、客户端配置
3.1 第一步：使用 npm 命令安装前端框架依赖，安装 VUE3 版本。
npminstall@inertiajs/inertia@inertiajs/inertia-vue3
3.2 第二步：初始化应用
打开 /resouces/js/app.js，清空后覆盖以下代码
import{createApp,h}from'vue'import{createInertiaApp}from'@inertiajs/inertia-vue3'createInertiaApp({resolve:name=>require(`./Pages/${name}`),setup({el,app,props,plugin}){createApp({render:()=>h(app,props)}).use(plugin).mount(el)},})
3.3 第三步：npm 安装进度条包
使用 inertia 做出来的页面，浏览器不会刷新，为了用户感知增加了页面顶部进度条这种友好的提示 [脑补一下]
npminstall@inertiajs/progress
安装完成后，引入并初始化，打开 /resouces/js/app.js，清空后覆盖以下代码
import{createApp,h}from'vue'import{createInertiaApp}from'@inertiajs/inertia-vue3'import{InertiaProgress}from'@inertiajs/progress'createInertiaApp({resolve:name=>import(`./Pages/${name}`),setup({el,app,props,plugin}){createApp({render:()=>h(app,props)}).use(plugin).mount(el)},})InertiaProgress.init()
3.4 第四步使用以下 webpack 配置来强制浏览器在文件更新后，加载新的资源，而不是使用缓存。
打开 webpack.mix.js，清空并覆盖以下代码
constmix=require('laravel-mix');mix.js('resources/js/app.js','public/js').postCss('resources/css/app.css','public/css',[//]);mix.webpackConfig({output:{chunkFilename:'js/[name].js?id=[chunkhash]',}});四、安装 VUE
第一步使用 npm 命令安装 vue 最新稳定版
npminstallvue@next
第二步添加.vue () 到 webpack.mix.js
constmix=require('laravel-mix');mix.js('resources/js/app.js','public/js').vue().postCss('resources/css/app.css','public/css',[//]);mix.webpackConfig({output:{chunkFilename:'js/[name].js?id=[chunkhash]',}});
第三步通过 npm 命令运行
npmrunwatch
如果报错
解决：升级 vue-loader，执行
npmivue-loader
如果还报错
解决：resouces/js 目录下新增 Pages 文件夹。
成功状态
本文安装参考
inertia.js 中文文档
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/36595.html；
