首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

更改webpack mix laravel中的字体编译路径

在Webpack Mix中更改Laravel中的字体编译路径是通过修改Webpack配置文件来实现的。

首先,Webpack Mix是一个基于Webpack的前端构建工具,用于帮助我们在Laravel项目中进行前端资源的编译和打包。它提供了简洁的API来配置和执行常见的前端构建任务。

要更改字体编译路径,我们需要先定位到Webpack配置文件,该文件通常位于Laravel项目的根目录下的webpack.mix.js文件。在该文件中,我们可以找到Mix对象的字体方法(fonts())。

fonts()方法用于编译字体文件。默认情况下,字体文件将被编译到Laravel项目的public目录下的fonts子目录中。如果我们希望更改字体编译路径,可以通过修改该方法的参数来实现。

例如,如果我们希望将字体编译到public目录下的assets/fonts子目录中,可以将fonts()方法的参数修改如下:

代码语言:txt
复制
mix.fonts('resources/fonts', 'public/assets/fonts');

上述代码中,第一个参数'resources/fonts'表示字体文件的源目录路径,第二个参数'public/assets/fonts'表示字体文件的目标目录路径。我们可以根据实际情况进行修改。

完成以上修改后,保存webpack.mix.js文件并运行相应的Webpack Mix命令来重新编译前端资源即可。具体命令取决于我们所使用的具体构建任务,例如mix.js()、mix.sass()等。

这样,字体文件将被编译到我们指定的目标路径中,可以在前端代码中引用并使用这些字体文件。

腾讯云提供了丰富的云计算相关产品,其中适用于前端资源编译和打包的产品为腾讯云COS(对象存储服务)。COS是一种分布式存储服务,提供了存储、加密、鉴权等功能,适用于各种场景下的数据存储需求。我们可以将编译后的字体文件上传到COS,并通过COS的访问地址进行访问。了解更多关于腾讯云COS的信息,请访问官方文档:腾讯云COS

请注意,以上回答仅针对Laravel中使用Webpack Mix进行字体编译路径更改的问题。如果您有其他云计算、IT互联网领域的问题,欢迎随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Laravel Mix 初探

简介 针对 Laravel 优化了 Laravel Mix, 提供了高效优雅 API,用于使用几个常见 CSS 和 JavaScript 预处理器为应用定义 Webpack 构建步骤,基本可以使到...配置 Laravel Mix 现在在根目录下就应该可以看到一个webpack.mix.js文件,他是 Laravel Mix 配置文件,和我们平时看到 webpack.config.js 长得不太一样...现在,当你修改webpack.mix.js文件监控下静态资源或者 Laravel PHP 文件时,浏览器会即时刷新页面以响应你更改。...| package.json webpack.mix.js 接下来写一个简单 Laravel Mix 配置文件, webpack.mix.js let mix = require('laravel-mix...每次都要手动打版本号确实让人不太爽,但是你可以使用 Laravel Mix de version() 它会自动为所有编译文件文件名附加一个唯一哈希值,从而实现更方便缓存清除功能: mix.js('

4.3K60
  • 让 F5 歇一会儿——laravel-mix 自动刷新之道

    因为近几年来大部分时假在与 Laravel 打交道,使用 laravel-mix 已成家常便饭,所以想着总结并分享一下 laravel-mix 工作流自动刷新之道。...安装依赖 yarn add -D browser-sync browser-sync-webpack-plugin 在 webpack.mix.js 文件调用 mix.browserSync() 启动...在 webpack.mix.js 根据实际场景配置 hmr 参数 // 配置 hmr 参数 mix.options({ hmrOptions: { host: 'laravel-mix-autoreload-demo.test...打开页面,修改页面引用前端资源(如 js,css)并保存,页面将自动刷新 因为使用 laravel-mix 编译,一般修改 resource/ 目录下文件,但实际上直接修改 public/ 目录文件也是可以触发刷新...环境存在路径分隔符问题 见 Issue ,好在这几个 Issue 里也给出了这些问题解决办法,虽然不甚优雅,但至少行得通。

    2.3K20

    Laravel 项目中使用 Bootstrap 框架

    dev 编译前端资源 接下来,我们就可以运行 npm run dev 命令通过 Laravel Mix编译前端资源了,该命令定义在 package.json : 该命令最终运行是 npm run...Laravel Mix 是对 Webpack 进行封装后提供给 Laravel 项目使用前端打包工具,Webpack 是目前最新、广泛使用前端资源打包工具(之前还有 Grunt、Gulp 等),能够以模块方式处理所有前端资源...,Laravel Mix 对其提供功能进行了封装从而避免后端开发人员大量编写 Webpack 配置命令,大多数时候我们需要在 resources/js/app.js 和 resources/sass/...Laravel Mix 配置文件就是项目根目录下 webpack.mix.js: const mix = require('laravel-mix'); mix.js('resources/js/...laravel-mix 库,然后运用它提供 js 和 sass 方法将 resources/js/app.js 编译打包后输出到 public/js/app.js,将 resources/sass/

    3.4K31

    Homestead + laravel-mix 环境下 hmr 两种玩法

    我在前几天刚写过《让 F5 歇一会儿——laravel-mix 自动刷新之道》[1]中介绍了 laravel-mix 实现自动刷新几种方法,其中就有涉及 hmr(Hot Module Replacement...对于 Laravel 官方首推 Homestead 当然也是可以,只不过用法上有些差别,于加上 laravel-mix 本身一些 BUG(在 issue 里搜索 hmr 结果就有好几页 :smile...1.vagrant ssh 连接虚拟机,进入项目目录后安装前端依赖 yarn install 2.在 webpack.mix.js 调整相关配置 使用 mix.Webpack() 配置 devServer...在虚拟机终端执行yarn run hot,然后在浏览器中使用绑定测试域名(如:laravel.test)访问 34.修改 JS 等,自动编译后浏览器页面即自动更新 玩法二:使用宿主机 Node...修改 JS 等,自动编译后浏览器页面即自动更新 总结 两种方法并没有谁好谁坏之分,具体使用哪种方法视具体场景及个人喜好而定。

    1.6K10

    Laravel 项目中使用 webpack-encore

    看过我之前写过博客应该知道我一直是 laravel-mix 死忠粉,有好几篇文章都是关于它。每每提到 laravel-mix 时更是不吝溢美之词。...正所谓爱之深,责之切,在对 laravel-mix 表示失望之后,我翻出了自己 star 多时另一包 webpack-encore,虽说很早就 star 了,但之前却没试用过它,可能也是因为对于 laravel-mix...而我迁移这个项目,是一个 Laravel 项目,所以下面就分享下,如果在 Laravel 项目中使用 webpack-encore 替代 laravel-mix。...自带了一个 mix() 函数用于引用 mix 编译资源,与之类似,syfony 也有这样函数,而且更为方便。...(scripts) 因为 laravel 项目默认 package.json develop 等相关脚本都是使用 laravel-mix ,为了方便日常开发,现在要对它们进行一些调整,改用 webpack-cocore

    2.1K20

    引入 Laravel Mix 管理前端资源

    ,以及 Less、Sass 等预处理语言编写模块化样式代码,然后通过 WebPack 对其这些前端资源进行编译、打包、压缩、分发,变成最终可用静态资源文件。...如果要完整介绍并构建这样一套前端开发环境,需要引入很多额外篇幅和前端知识,好在 Laravel 生态提供了一个 Laravel Mix 组件,该组件对 Webpack 构建步骤做了封装,提供了一套非常简单流式...虽然该项目是针对 Laravel 框架开发,不过,由于是一个纯前端项目,因此可以适用于所有 Web 前端项目,现在,我们就来在博客项目中引入 Laravel Mix 管理前端资源。...安装 Laravel Mix 开始之前,需要先安装 Laravel Mix 组件需要前端相关依赖,假设你系统上已经安装过 Node 和 NPM 包管理器,如果没有安装的话前往 Node.js 官方下载页面...--hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": {

    1.6K20

    Laravel 前端资源配置教程

    最近在学Laravel,遇到前端资源加载问题,记录一下。 一、前端共用资源配置 1. webpack.mix.js //一般不太更动,透过以下两个档案讲所需资源加载。...mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css...// vue所有页面共用,可以在app.js初始/启用 6. npm编译 npm run dev #resource档案夹下资源需要编译才会生效 二、各页面私有资源 1....-- 在适当位置加入以上两条语句,建议@stack('styles'放在<head , @stack('scripts')放在<body 内底部(部分JS需要等DOM加载完成方可使用)。...</div @endsection 以上这篇Laravel 前端资源配置教程就是小编分享给大家全部内容了,希望能给大家一个参考。

    1.2K52

    将博客主题替换成 Clean Blog

    js 文件变成最终可以引入到 HTML 文档文件,还需要在 blog 根目录下新建 webpack.mix.js,通过 Laravel Mix编译打包这些预处理 js 文件: const mix...= require('laravel-mix') mix.js('resources/js/app.js', 'public/js'); 上述代码含义是引入 Laravel Mix,然后通过它提供...然后在 webpack.mix.js 补充对应处理逻辑: const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public...5、编译前端资源文件 完成以上编码后就可以在项目根目录下执行 npm run dev 编译打包前端资源了: ? 编译成功后,就可以在 public 目录下看到对应新文件了: ?...> 关于专辑页和文章页,可以参考 Github 仓库代码,这里就不一一列举了: 专辑页:https://github.com/nonfu/master-laravel-code

    72920

    关于laravel框架常用目录路径函数

    简介 1、app目录绝对路径path = app_path();- 还可以使用app_path函数为相对于app目录给定文件生成绝对路径:path = app_path(‘Http/Controllers.../Controller.php’); 2、项目根目录绝对路径path = base_path();- 还可以使用base_path函数为相对于应用目录给定文件生成绝对路径path& 1、app目录绝对路径.../bin'); 3、应用配置目录绝对路径 $path = config_path(); 4、数据库目录绝对路径 $path = database_path(); 5、public目录绝对路径 $path...= public_path(); 6、storage目录绝对路径 $path = storage_path(); – 还可以使用storage_path函数生成相对于storage目录给定文件绝对路径...$path = storage_path('app/file.txt'); 以上这篇关于laravel框架常用目录路径函数就是小编分享给大家全部内容了,希望能给大家一个参考。

    1.6K21

    页面布局(下):引入 Tailwind CSS 框架构建博客应用 UI 界面

    在上篇教程,学院君给大家演示了单页面博客应用前端路由和页面布局基本构建,不过由于没有应用任何 CSS 样式代码,所以 UI 界面很丑陋,今天,学院君将引入 Tailwind CSS 框架来美化这个博客应用...基于 Laravel Mix 引入 Tailwind 在 Laravel 项目中,我们可以基于 Lavavel Mix 快速引入 Tailwind CSS 框架,开始之前,先安装 laravel-mix-tailwind...这个前端依赖包: npm install laravel-mix-tailwind --save-dev 安装完成后,需要在项目根目录下 webpack.mix.js 引入它: const mix...= require('laravel-mix'); require('laravel-mix-tailwind'); ......: npm run watch 编译成功,则表明 Tailwind CSS 框架已正常引入。

    2.7K20

    引入 SB Admin 2 作为后台管理系统主题

    ,这里引入 SB Admin 2 提供 Sass 源代码即可: @import "~startbootstrap-sb-admin-2/scss/sb-admin-2"; 通过 Laravel Mix...编译前端资源 做好以上准备工作后,就可以在 webpack.mix.js 中将上述资源文件编译打包为对应 JavaScript 和 Css 代码了: const mix = require('laravel-mix...') // 编译前台资源 ... // 编译后台资源 mix.js('resources/js/admin.js', 'public/js/admin.js') .js('resources/...为了简化操作和演示流程,我们直接拷贝 SB Admin 2 仪表盘视图 HTML 代码(位于 node_modules/startbootstrap-sb-admin-2/index.html),然后将其中前端资源文件调整为本博客项目的资源文件路径...@index'); 对应请求处理逻辑位于后台控制器 Admim\DashboardController index 方法,如果没有创建这个控制器,现在创建它(在 app/http/controller

    4.2K10

    前后端分离探索——MVC 项目升级一个过渡方案

    传统 MVC 项目直接升级到前后端分离需要大量时间与人力,在业务多变阶段并不适合,所以便有了本文过渡方案探索 路由先不分离,仍然采用 PHP 提供路由 模板部分分离,在原 PHP 模板,引入...Laravel Mix 工具,这会节省大量前端配置时间 根目录新建文件 webpack.mix.js const fs = require('fs'); const mix = require('laravel-mix...# 局限 不能做到全局自动加载组件 编译文件大小可能会很大 # 优势 可以更好地编写复杂页面 更好维护性 # 权限交互 ?...9 10 11 # laravel-mix 配置 const path = require('path') const mix = require('laravel-mix') const rs_root.../resources/js 文件夹可以删掉了,编译总文件大小约 2.5 M 至此,优化完成,完美解决了开发流程痛点 # 后记 目前仍在不断地探索

    1.2K20

    创建并运行一个新 Laravel 项目

    Vue 模板、Sass、JS 源文件 routes:项目的所有路由文件都定义在这里 storage:用于存放缓存、日志、上传文件、已经编译视图模板等 tests:存放单元测试及功能测试代码 vendor...artisan 执行 Artisan 命令 .gitignore 和 .gitattributes:Git 配置文件 composer.json 和 composer.lock:Composer 配置文件 webpack.mix.js...:Laravel Mix Webpack 配置文件,用于编译和打包前端资源 package.json:配置前端资源依赖和脚本(类似于 composer.json 之于 PHP) phpunit.xml:...Composer,指定 NPM 包版本 .editorconfig:用于在不同 IDE 或编辑器维护代码风格一致性 3、配置 Laravel 应用一些核心配置,比如数据库、队列、邮件等,都位于...如上例所示,所有的因环境而异变量配置值(尤其是敏感信息)都应该存放到根目录下 .env 环境变量文件: SPARKPOST_SECRET = xyj_laravelacademy.org 然后在配置文件通过

    6.8K30
    领券