我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

Laravel的vite-plugin包怎么使用

这篇文章主要介绍“Laravel的vite-plugin包怎么使用”,在日常操作中,相信很多人在Laravel的vite-plugin包怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Laravel的vite-plugin包怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联建站成立以来不断整合自身及行业资源、不断突破观念以使企业策略得到完善和成熟,建立了一套“以技术为基点,以客户需求中心、市场为导向”的快速反应体系。对公司的主营项目,如中高端企业网站企划 / 设计、行业 / 企业门户设计推广、行业门户平台运营、APP应用开发成都手机网站制作、微信网站制作、软件开发、郑州服务器托管等实行标准化操作,让客户可以直观的预知到从创新互联建站可以获得的服务效果。

Laravel 团队更新了第一方 Laravel vite-plugin 包, 以支持blade 模板/任意文件更改时的全页重新加载。当你编辑更改的 blade 模板(或你配置的任何其他文件)时,Vite 将重新加载整个页面。开发过程中不再需要手动刷新浏览器!

安装新的 Laravel 项目时,你的 vite.config.js 文件中的基本配置如下所示:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
    ],
});

上面的代码片段是一个全新的 Laravel 应用程序附带的;你不需要做任何事情来让热重载在一个新项目上工作。

注意 refresh 配置——当设置为 true 时,Laravel Vite 插件会在你更新以下路径中的文件时刷新页面:

routes/**
resources/views/**

该约定可能适用于大多数项目,但如果你想包含其他路径或文件,你可以配置刷新属性:

 import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: [
                'resources/routes/**',
                'routes/**',
                'resources/views/**',
            ],
        }),
    ],
});

试试看

让我们设置一个演示 Laravel 应用程序来演示热重载。首先,让我们创建一个新的演示项目:

laravel new blade-hot-reload --git
cd blade-hot-reload

安装项目后,将以下内容添加到 resources/views/ 中的welcome.blade.php 文件的 中:

@vite('resources/js/app.js')

接下来,你需要安装 NPM 依赖项并运行 dev 命令:

npm install
npm run dev

到此,关于“Laravel的vite-plugin包怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网站题目:Laravel的vite-plugin包怎么使用
转载注明:http://shouzuofang.com/article/pephei.html

其他资讯