feat: allow assets to be external instead of inline in lib mode.

[wxsms]

Description

this PR solved #4454

As a newbie to vite, I have no idea whether this solution or the option design is is good enough, but it works in my case. I can tweak this if any feedback. If this looks too stupid, sry to bother, pls close it at will.

Additional context

This feature generate code like this in library mode:

import { defineComponent, openBlock, createElementBlock, unref, ref, computed, watch, nextTick, onBeforeUnmount, onMounted, normalizeClass, Fragment, renderList, renderSlot, normalizeStyle, createVNode, withCtx, createCommentVNode, pushScopeId, popScopeId, createElementVNode, createTextVNode } from "vue";
import _imports_0$1 from "./assets/some-image.68d77419.png"; // <-
import _imports_1$1 from "./assets/other-image.58733637.png"; // <-

// ...

css (if any):

/* added a dot in front of asset path */
.list-loading[data-v-5e2e31c0]{background:url(./assets/list-loading-dark.e0e27964.gif)}

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[hronro]

import _imports_0$1 from "./assets/some-image.68d77419.png";

some-image.68d77419.png is not a valid javascript module, so if you run the generated code directly in the browser, you'll get an error.

It is OK if you consume the generated code via some bundlers. However, not all the bundlers handle this (import assets in javascript) in a same way. I think it's better not to assume all the users will use a bundler to consume the generated code.

[Bigfish8]

@hronro
How about const _imports_0$1 = "./assets/some-image.68d77419.png";?
It result in <img src="./assets/some-image.68d77419.png"> and will work.

[hronro]

@Bigfish8

Unfortunately, const _imports_0$1 = "./assets/some-image.68d77419.png"; doesn't work.

"./assets/some-image.68d77419.png" is a relative path, unfortunately, it's not related to the library we build, it's related to the URL of the current web page, which can be a random string for single-page applications.

Using an absolute path does not work either. Absolute path generation depends on the value of Public Base Path (or output.publicPath in webpack), which can be different when different people using the library we build. It is not possible for us to determine the value of public base path at the time of building the library.

[Bigfish8]

@hronro
Thank you very much for the detail explanation!
Because we dont know the library comes from which url,so we should use the information like import.meta.url.

[Matb85]

really looking forward to it

[vaynevayne]

How do you use vite to build a component library? can you give me an example?

[m8ms]

Could this be merged? We really need this feature...