Как использовать общедоступные изображения в библиотеке Vue Rollup - PullRequest
Новая
       18

Как использовать общедоступные изображения в библиотеке Vue Rollup

0 голосов
/ 10 июля 2019

Я создаю библиотеку компонентов пользовательского интерфейса с использованием vue и rollup, все работает нормально, за исключением случаев использования общедоступных / статических изображений. 

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», поэтому он ищет изображения, хранящиеся в проекте приложения, внутри изображений, хранящихся в проекте библиотеки.

...