search

vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.33k forks source link

Cannot import image assets from VueJS lib #7075

Open maelp opened 2 years ago

maelp commented 2 years ago

Version

5.0.4

Environment info


Environment Info:

  System:
    OS: macOS 12.3
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
  Binaries:
    Node: 16.14.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.3.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 99.0.4844.83
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.4
  npmPackages:
    @ionic/vue: ^5.4.0 => 5.8.5 (6.0.12)
    @ionic/vue-router: ^5.4.0 => 5.8.5 (6.0.12)
    @storybook/vue3:  undefined (6.4.19)
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.15 (5.0.3)
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.15 (5.0.3)
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.15 (5.0.3)
    @vue/cli-plugin-e2e-cypress: ~4.5.0 => 4.5.15 (5.0.3)
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.15 (5.0.3)
    @vue/cli-plugin-router: ~4.5.0 => 4.5.15 (5.0.3)
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.15 (5.0.3)
    @vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.15 (5.0.3)
    @vue/cli-plugin-vuex:  4.5.15 (5.0.3)
    @vue/cli-service: ~4.5.0 => 4.5.15 (5.0.3)
    @vue/cli-shared-utils:  4.5.15 (5.0.3)
    @vue/compiler-core:  3.2.22 (3.2.31)
    @vue/compiler-dom:  3.2.22 (3.2.31)
    @vue/compiler-sfc: ^3.0.0-0 => 3.2.22 (3.2.31)
    @vue/compiler-ssr:  3.2.22 (3.2.31)
    @vue/component-compiler-utils:  3.3.0
    @vue/devtools-api:  6.0.0-beta.20.1 (6.1.3)
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0 (9.1.0)
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.2.22 (3.2.31)
    @vue/reactivity-transform:  3.2.31
    @vue/ref-transform:  3.2.22
    @vue/runtime-core:  3.2.22 (3.2.31)
    @vue/runtime-dom:  3.2.22 (3.2.31)
    @vue/server-renderer:  3.2.22 (3.2.31)
    @vue/shared:  3.2.22 (3.2.31)
    @vue/test-utils: ^2.0.0-0 => 2.0.0-rc.16 (2.0.0-rc.17)
    @vue/vue3-jest:  undefined (27.0.0-alpha.4)
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.0.0-0 => 7.20.0 (8.5.0)
    jest-serializer-vue:  2.0.2
    typescript: ^4.3.5 => 4.4.4 (4.6.2)
    vue: ^3.2.1 => 3.2.22 (3.2.31)
    vue-docgen-api:  undefined (4.44.18)
    vue-docgen-loader:  undefined (1.5.0)
    vue-eslint-parser:  7.11.0 (8.3.0)
    vue-hot-reload-api:  2.3.4
    vue-inbrowser-compiler-utils:  undefined (4.44.17)
    vue-jest: ^5.0.0-0 => 5.0.0-alpha.10 (3.0.7)
    vue-loader:  15.9.8 (17.0.0, 16.8.3)
    vue-router: ^4.0.0-0 => 4.0.12 (4.0.14)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
    vuex: ^4.0.2 => 4.0.2
  npmGlobalPackages:
    @vue/cli: 5.0.0-rc.1

Steps to reproduce

What is expected?

That the resources from the NPM lib are added to the app assets

What is actually happening?

The resources are properly added to the NPM lib dist/img folder, but when the NPM lib is installed in an app (eg yarn add ../my-ui-lib), and the project is built, the images do not appear in the dist/ folder of the app

What is the way to have assets from an NPM lib containing a VueJS component with assets (for instance images) to be copied in the app build dir from which it is used?

EnObj commented 1 year ago

I have the same question.