vue-cli3 使用雪碧图

• Z时代
• 2024-01-10
• 分类：综合

//vue.config.js
const path = require("path");
const SpritesmithPlugin = require("webpack-spritesmith"); //引入雪碧图
module.exports = {
  // 请求基本路径（是否在根目录下）
  baseUrl: "process.env.NODE_ENV" === "production" ? "/" : "",
  // assetsSubDirectory: 'static',//必须热刷新
  // http://yuanbao/
  // http://www.yuanbaowl.com/
  // 输出文件目录 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
  outputDir: "dist",
  // // eslint-loader生产模式下禁用lintOnSave是否在保存的时候检查
  // lintOnSave: process.env.NODE_ENV !== 'production',
  // 关闭语法检查错误警告
  lintOnSave: false,
  // 放置生成的静态资源 (js、css、img、fonts) 的 相对于输出目录。
  // assetsDir:'',
  // 指定生成的 index.html 的输出路径 (相对于 输出目录)。也可以是一个绝对路径。
  // indexPath:'index.html',
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  // compiler: false,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {},
  // 设定webpack
  configureWebpack: {
    plugins: [
      new SpritesmithPlugin({
        // 目标小图标
        src: {
          cwd: path.resolve(__dirname, "./src/assets/images/icon"),
          glob: "*.png"
        },
        // 输出雪碧图文件及样式文件
        target: {
          image: path.resolve(__dirname, "./src/assets/images/sprite.png"),
          css: [
            [
              path.resolve(__dirname, "./src/assets/css/sprite.less"),
              {
                format: "function_based_template"
              }
            ]
          ]
        },
        customTemplates: {
          function_based_template: path.resolve(
            __dirname,
            "./my_handlebars_template.handlebars"
          )
        },
        // 样式文件中调用雪碧图地址写法
        apiOptions: {
          cssImageRef: "../images/sprite.png?v=" + Date.parse(new Date())
        },
        spritesmithOptions: {
          algorithm: "binary-tree"
        }
      })
    ]
  },
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: true,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      css: {
        //  这里的选项会传递给css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
        plugins: [
          require("postcss-px2rem")({
            remUnit: 75
          })
        ]
      }
    }
    // 启用 CSS modules for all css / pre-processor files.
    //  modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require("os").cpus().length > 1,
  // 是否启用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    port: 8085, // 端口号
    host: "localhost",
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    // // 设置代理
    proxy: {
      "/api": {
        // target: 'http://120.79.251.89',//跨域地址
        target: "http://Vuewallet",
        ws: false, //是否代理websockets
        changeOrigin: true, //允许跨域
        pathRewrite: {
          "^/api": "/"
        }
      }
    },
    overlay: {
      //  当存在编译器错误或警告时，在浏览器中显示全屏覆盖。
      // 默认情况下禁用。如果只想显示编译器错误：
      //  同时显示警告和错误：
      warnings: true,
      errors: true
    }
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
    SpritesmithPlugin: "webpack-spritesmith"
  }
};

根目录下创建 my_handlebars_template.handlebars文件写入对应模板

{{#block "sprites"}}
{{#block "spritesheet"}}
@img:url('{{{spritesheet.escaped_image}}}');
@r:75rem;
.icon{
   background-size: {{spritesheet.width}}/@r {{spritesheet.height}}/@r;
   background-repeat:no-repeat;
   display:inline-block;
};
{{/block}}
{{#each sprites}}
.icon-{{{strings.name}}} {
  background-image: @img;
  background-position: {{offset_x}}/@r {{offset_y}}/@r;
  width: {{width}}/@r;
  height: {{height}}/@r
};
{{/each}}
{{/block}}

以上是 vue-cli3 使用雪碧图 的全部内容， 来源链接： utcz.com/z/378488.html