如何在vue rollup库中使用公共镜像

Question

我正在使用 vue 和 rollup 构建一个 ui 组件库，除了使用公共/静态图像时，一切都工作正常。

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import vue from 'rollup-plugin-vue';
import sass from 'rollup-plugin-sass';
import replace from 'rollup-plugin-replace';
import { uglify } from 'rollup-plugin-uglify';

import pkg from './package.json';

const plugins = [
  vue(),
  replace({
    'process.env.NODE_ENV': JSON.stringify('production'),
  }),
  sass({
    insert: true,
  }),
  resolve(),
  commonjs(),
  uglify(),
];

export default [
  {
    input: 'src/main.js',
    output: {
      name: 'daas-components',
      file: pkg.browser,
      format: 'umd',
    },
    plugins,
  },
  {
    input: 'src/main.js',
    output: [
      { file: pkg.main, format: 'cjs' },
      { file: pkg.module, format: 'es' },
    ],
    plugins,
  },
];

/*
 Some component with images
 Now I'm using normal public path images use
*/

<template>
  <div class="Chip" :class="className" :data-cy="dataCy">
    <slot></slot>
    <div class="Chip__Actions">
      <div class="Chip__Actions__Closer" @click="onClose" v-if="isClosable">
        <img src="/icons/close.svg" alt="closer-chip" />
      </div>
      <div class="Chip__Actions__Addabler" @click="onAdd" v-if="isAddable">
        <img src="/icons/add.svg" alt="addabler-chip" />
      </div>
    </div>
  </div>
</template>


[...]

当在主项目中使用该库时，使用的图像以“http:://localhost:8080/CURRENT_PATH/MY_IMAGE_PATH”为前缀，因此它会在库项目中存储的图像内查找存储在应用程序项目中的图像。

Answer 1

使用插件：@rollup/plugin-url配置公共路径

// rollup.config.js

import url from 'rollup-plugin-url'

export default {
  // ...
  plugins: [
    // ...
    url({
      // by default, rollup-plugin-url will not handle font files
      include: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.gif', '**/*.woff', '**/*.woff2'],
      // setting infinite limit will ensure that the files 
      // are always bundled with the code, not copied to /dist
      limit: Infinity,
      publicPath: '/public',
    }),
  ],
  // ...
}