nuxt2 修改svg loader 配置

已于 2022-11-02 17:29:24 修改
阅读量342 收藏
点赞数
分类专栏： vue2、nuxt2 文章标签： vue.js javascript 前端
于 2022-11-02 17:01:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34510843/article/details/127654746
版权
本文介绍了如何在Nuxt2项目中修改SVG加载器的配置。通过在nuxt.config.js中扩展build.extend，调整webpack配置，针对SVG加载器的正则表达式进行定制，以实现对SVG文件解析方式的改变。文章分为两个步骤详细阐述了这一过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

nuxt2 修改svg loader 配置

第一步

在nuxt.config.js 修改build.extend 扩展，也就是修改webpack 配置，找到解析 svg 的loader，然后修改loader的正则表达式，去掉匹配的部分

 const svgRule = config.module.rules.find((rule) => rule.test.test('.svg')
最低0.47元/天 解锁文章
Nuxtjs 项目使用 svg-sprite-loader 更改 svg 的颜色
老司机的后备箱
10-24 1575
由于一些原因，最新的公司项目要使用的技术切换到了Nuxt.js，也就是Vue的 ssr 服务端渲染框架。使用会让你的svg引入写起来非常的舒服，可以随意修改其颜色，就是配置起来稍稍麻烦一点。但对比开发体验来说，这点时间花费，是完全值得的！为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
nuxt 自动导入svg不显示（svg-sprite-loader）
weixin_45925443的博客
03-05 1216
记录下一个小问题 nuxt 自动导入svg不显示 一开始用的是svg-sprite-loader打包svg图片，然而在nuxt.config.js中配置后一直没有效果，并不会生成下图这个玩意 经过我一番搜索，还是没有找到解决方法，直到我突然百度搜索突然推了个这个，让我突然感觉到了希望，这个loader网址：点这 然后安装： npm install nuxt-svg-sprite-loader 配置nuxt.config.js: modules: [ ['nuxt-svg-sp
nuxt-svg-loader:SVG作为组件，也在服务器端！
05-13
Nuxt SVG加载程序-SVG作为组件，也在服务器端！ 特征 完全支持SVG作为组件。 像Vue SFC一样导入它们 使用Vue绑定，就像处理普通组件一样 建立在之上 Nuxt 2（仅Nuxt 2）支持 经过全面测试！ 演示版 可以通过获得现场演示。 设置 使用yarn或npm将nuxt-svg-loader添加为依赖项到您的项目 添加nuxt-svg-loader到modules的部分nuxt.config.js { modules : [ 'nuxt-svg-loader' , ] } 现在，您可以像常规Vue组件一样使用svg文件 您还可以通过在文件路径末尾添加?inline来使用内联svg <template> <nav> <a> <VueLogo>
nuxt-svg-sprite-loader:用于svg-sprite-loader的Nuxt.js模块
03-17
nuxt-svg-sprite-loader 用于svg-sprite-loader的Nuxt.js模块。 安装 # npm $ npm install nuxt-svg-sprite-loader # Yarn $ yarn add nuxt-svg-sprite-loader 用法 该模块添加到您Nuxt.js模块列表nuxt.config.js ： export default { ... modules : [ 'nuxt-svg-sprite-loader' ] } 在页面中使用SVG： < template> < svg >< use xss=removed></ use></ svg > </ template> < script > import Logo from ' @/
svg-loader：外部SVG资源加载的艺术
gitblog_00788的博客
04-09 792
svg-loader：外部SVG资源加载的艺术 svg-loader Plug 'n Play external SVG loader 项目地址: https://gitcode.com/gh_mirrors/sv/svg-loa...
nuxt 2.x 加载 svg 小列子
StriveNuby的博客
10-06 1877
nuxt 2.x 加载 svg 小列子使用 svg-sprite-loader 加载自动导入svg 使用 svg-sprite-loader 加载 // nuxt.config.js const { resolve } = require('path') // 排除 nuxt 原配置的影响 const svgRule = config.module.rules.find(rule =&amp;amp;gt; r...
nuxt-image-loader-module:用于nuxt.js的图像加载器模块，允许您配置图像样式派生类
05-14
Nuxt图像加载器模块 此模块将根据您定义的规则自动调整图像的大小，旋转，模糊，水印和裁切（等）。 该模块通过拦截传入的图像请求（在服务器端）来工作，并且如果在图像URL上附加了查询字符串，则将使用源图像或已处理的图像进行响应。 通过在nuxt.config.json定义“图像样式”来完成图像nuxt.config.json 。 您可以根据需要添加任意数量的这些。 图像是使用程序包处理的，因此请参考那里的文档以了解各种图像处理功能和选项。 适用于所有nuxt部署模式： 服务器渲染npm run build && npm run start 静态生成npm run generate 热模块更换npm run dev 安装 重要说明：将安装在应用程序所在的主机系统（或容器）上。 将此模块作为依赖项安装在您的项目中： npm install @pivale/nuxt-image-
推荐使用Nuxt SVG Loader：将SVG转化为组件的艺术！
gitblog_00057的博客
06-14 513
推荐使用Nuxt SVG Loader：将SVG转化为组件的艺术！ nuxt-svg-loaderSVGs as components, also on the server side!项目地址:https://gitcode.com/gh_mirrors/nu/nuxt-svg-loader 在前端开发中，SVG的使用变得越来越普遍，它们为我们的应用程序带来了精美的图标和矢量图形。然而，管理和...
nuxt项目引入svg
u010426490的专栏
06-16 584
nuxt.js项目引入svg
Nuxt.js SVG Loader 教程
gitblog_00835的博客
08-31 988
Nuxt.js SVG Loader 教程 nuxt-svg-loaderSVGs as components, also on the server side!项目地址:https://gitcode.com/gh_mirrors/nu/nuxt-svg-loader 项目介绍 Nuxt.svg-loader 是一个专为 Nuxt.js 设计的SVG加载器插件。它允许开发者在 Nuxt 应用...
nuxt-template:具有最佳实践文件夹结构、windi.css 配置的企业 Nuxt 2 样板 :sparkles::sparkles::sparkles:
08-04
nuxt-模板 构建设置 # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn dev # build for production and launch server $ yarn build $ yarn start # generate static project $ yarn generate 有关工作原理的详细说明，请查看。 特别目录 您可以创建以下额外目录，其中一些具有特殊行为。 只需要pages ； 如果您不想使用它们的功能，您可以删除它们。 assets 资产目录包含未编译的资产，例如 Stylus 或 Sass 文件、图像或字体。 有关此目录用法的更多信息。 components components 目录包含您的 Vue.js 组件。 组件
vite-svg-loader:Vite 2.x插件可将SVG文件作为Vue组件加载
05-13
Vite SVG装载机 Vite 2.x插件可将SVG文件作为Vue组件加载。 < template> < MyIcon> </ template> < script setup > import MyIcon from ' ./my-icon.svg ' </ script > 安装 npm install vite-svg-loader --save-dev 设置 vite.config.js import svgLoader from 'vite-svg-loader' export default { plugins : [ vue ( ) , svgLoader ( ) ] } 与TypeScript一起使用 如果在Typescript项目中使用加载程序，则可能会收到类似Type 'string' is not assignable to type 'Compo
Nuxt常用配置项
muzidigbig的博客
12-07 5544
更改地址栏中的ico图标 2.在创建nuxt项目是使用了esline，在编辑代码的时候受到影响，怎么注销掉esline 3.端口被占用配置端口 "config":{ "nuxt":{ "host":"127.0.0.1", "port":"1818" } } 配置好后，我们在终端中输入： npm run dev
nuxt webpack配置css,基于nuxt通过webpack配置ant-Design-vue的主题切换配置
weixin_32533375的博客
08-04 752
1.首先在nuxt官网初始化好基于ant-Design-vue的项目，安装.png选择ant-Design-vue UI框架2.初始化完成，查找package.json是否安装了less与less-loader的包，package.json.png一般项目在初始化完成后，是没有自动安装less与less-loader的，需要我们手动去配置，通过npm less less-loader --save...
eslint 设置目录_Nuxt项目添加自定义ESLint规则
weixin_40004057的博客
12-22 1221
介绍ESLint 是用来保持代码规范的Prettier 是十分受欢迎的代码格式化工具两者结合起来，可以轻松地格式化代码，规范代码。具体步骤如下：安装依赖npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier pre...
基于vue2+nuxt构建的高仿饿了么（2018版）
qq_37529115的博客
09-17 2718
前言 高仿饿了么，以nuxt作为vue的服务端渲染，适合刚接触或者准备上vue ssr的同学参考和学习 项目地址如遇网络不佳，请移步国内镜像加速节点 效果演示 查看demo请戳这里（请用chrome手机模式预览） 移动端扫描下方二维码 API接口文档 接口文档地址（基于apidoc） 技术栈 vue2 + vuex + vue-router + mint-ui...
如何在Nuxt.js中使用svg图标？以及nuxt.js与vue.js使用svg图标的区别
你好，PurePeace！
09-04 3435
首先介绍一下Nuxt.js：Nuxt.js是一个基于 Vue.js的轻量级框架，可用来创建服务端渲染 (SSR) 应用，也可用于生成静态站点。 官网：https://nuxtjs.org/ 使用Nuxt.js进行服务端渲染更利于SEO，这是我使用Nuxt.js的最大理由。 但是Nuxt.js的项目结构以及一些配置写法与我平常编写的vue-cli项目还是存在不少区别，所以写下这篇文章记录下在Nuxt.js中使用svg图标的过程。 首先，在nuxt中使用svg总共分为三步： 1.创建vue组件 首先在nuxt
推荐：SVG Loaders —— 动态SVG加载图标库
gitblog_00030的博客
05-11 577
推荐：SVG Loaders —— 动态SVG加载图标库 项目地址:https://gitcode.com/gh_mirrors/sv/SVG-Loaders 项目介绍 SVG Loaders 是一个由 Sam Herbert 创建的开源项目，提供了一组精美且可自定义的SVG动态加载图标。这些图标设计独特，能为您的网页在数据加载或处理过程中增添视觉吸引力，让用户在等待时不再枯燥无味。 项目技术分析...
SVG Loader 使用教程
最新发布
gitblog_00607的博客
04-16 813
SVG Loader 使用教程 svg-loader Plug 'n Play external SVG loader 项目地址: https://gitcode.com/gh_mirrors/sv/svg-loader ...
nuxt2 svg-icon
01-14
### 集成和使用 SVG 图标组件 #### 使用 `@nuxtjs/svg` 插件简化集成过程 为了更简便地处理SVG图标，在Nuxt.js 2项目中可以引入[@nuxtjs/svg]插件[^3]。安装此模块后，无需额外配置即可轻松导入单个SVG文件作为Vue组件或通过URL引用。 ```bash npm install @nuxtjs/svg ``` 接着更新项目的`nuxt.config.js`以注册该模块： ```javascript export default { modules: [ '@nuxtjs/svg' ] } ``` 这样设置之后，可以直接在模板里像下面这样做： ```html <template> <div> <!-- 直接引用 --> <img src="~/assets/logo.svg" alt="Logo"> <!-- 或者当作 Vue 组件使用 --> <inline-svg path="~/assets/icon-home.svg"></inline-svg> </div> </template> ``` #### 构建自定义的 SVG Sprites 方案 如果倾向于创建集中式的SVG精灵表，则可以在`nuxt.config.js`内加入如下配置项来指定目标路径以及可选前缀[^1]: ```javascript export default { svg: { sprite: { dest: 'static/icons', prefix: 'icon-' } }, build: { extend(config, ctx) { const svgRule = config.module.rules.find(rule => rule.test.test('.svg')) // 排除特定目录下的 .svg 文件不让默认loader处理 svgRule.exclude = [require('path').resolve(__dirname, 'assets/svg')] // 添加新规则专门针对要打包进sprite里的svg做特殊处理 config.module.rules.push({ test: /\.svg$/, include: [require('path').resolve(__dirname, 'assets/svg')], loader: 'svg-sprite-loader', options: {symbolId: 'icon-[name]'} }) } } } ``` 上述代码片段会将位于`assets/svg`内的所有`.svg`图像编译到静态资源下名为`icons`的子文件夹之中，并自动为其分配唯一的ID以便后续调用[^2]。 一旦完成了这些准备工作，就可以利用生成好的Sprite中的各个图形单元了。例如： ```html <template> <div> <svg class="icon"><use xlink:href="/icons/symbol-defs.svg#icon-example"/></svg> </div> </template> <style scoped> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值