vue-library-template icon indicating copy to clipboard operation
vue-library-template copied to clipboard

Including assets inside vue-components

Open JohnnyCrazy opened this issue 8 years ago • 1 comments
trafficstars

When using assets like png, svg, or jpeg they won't be included in the final package. Is there any way to get around this?

Example:

A.vue

<template>
  <div>
    <img :src="logo" />
  </div>
</template>
<script>
import logo from './logo.png'

export default {
  data() {
    return {
      logo: logo,
    };
  },
};
</script>

Output:

docs/img/logo.e25ad72.svg  12.8 kB          [emitted]  
lib/my_test.min.js  54.9 kB       0  [emitted]  my_test
lib/my_test.min.css  3.05 kB       0  [emitted]  my_test
lib/my_test.min.js.map   535 kB       0  [emitted]  my_test
lib/my_test.min.css.map   5.8 kB       0  [emitted]  my_test

JohnnyCrazy avatar Sep 26 '17 11:09 JohnnyCrazy

in build-lib.js

process.env.NODE_ENV = 'production'

change to

process.env.NODE_ENV = 'lib'

in webpack.lib.conf.js

module: {
    rules: utils.styleLoaders({
      sourceMap: config.lib.productionSourceMap,
      extract: true
    })
  }

change to

module: {
    rules: utils.styleLoaders({
      sourceMap: config.lib.productionSourceMap,
      extract: false
    })
  }

LiuJiangshan avatar Jul 10 '18 07:07 LiuJiangshan