vue-cli3中使用svg-sprite-loader方法

最新推荐文章于 2025-05-07 15:18:19 发布

qq_35321405

最新推荐文章于 2025-05-07 15:18:19 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/qq_35321405/article/details/99974916

一. 引用步骤

npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D
在src目录下新建svg文件夹，这里存放所有svg文件。
在vue.config.js文件中配置加载svg文件对应svg-sprite-loader规则

const path = require('path')
function resolve(dir) {
   
   
  return path.join(__dirname, dir)
}

module.exports = {
   
   
  pages: {
   
   
    index: {
   
   
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  lintOnSave: true,
  // 基本路径
  // baseUrl: './',//vue-cli3.3以下版本使用
  publicPath: './', // vue-cli3.3+新版本使用
  // 输出文件目录
  outputDir: 'dist/saas/',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: 'static',
  css: {
   
   
    loaderOptions: {
   
   
      // 给 sass-loader 传递选项
      sass: {
   
   
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `assets/scss/color.scss` 这个文件