-
-
Notifications
You must be signed in to change notification settings - Fork 6.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(plugin-vue): use server.origin when building base for transformAssetUrls #8077
fix(plugin-vue): use server.origin when building base for transformAssetUrls #8077
Conversation
21cade8
to
a343315
Compare
Would you add a test case so we avoid regressions? @innocenzi could you help us check this one? |
Added a test. Had to add another playground for it since this needs a modified |
|
Thanks! Dont mind the failing test, it is a glitch. We are trying to keep the number of playgrounds low. There is already a Another option would be to add origin to a more representative playground, like |
The failure looks like some kind of flake: |
@patak-dev I think everything related to I can also confirm this issue (related to the recently closed PR of mine btw). That being said, the fix doesn't work on my end: Actual <img alt="Vue logo" class="logo" src="https://captainjet.test:3000/preset.svg" width="125" height="125"> Expected <img alt="Vue logo" class="logo" src="https://captainjet.test:3000/resources/vue/pages/preset.svg" width="125" height="125"> Using a relative path in the template doesn't seem to resolve relatively to the asset with that PR |
I will see if I can move it there. There is some sensitivity with trailing slashes there, it's hard for me to tell what went wrong on your end from the information you posted so it would help if you can figure it out on your end or supply some reproduction/test that shows where it still doesn't work. |
I, in fact, had to add parenthesis to the null coalescing operator to make it work: assetUrlOptions = {
base: (options.devServer.config.server?.origin ?? '')
+ options.devServer.config.base
+ slash(import_path3.default.relative(options.root, import_path3.default.dirname(filename)))
}; |
Sticking it in "backend-integration" is gonna mess it up a bit since there are assets in the existing html there which won't render after this as I'm setting it to a bogus |
@innocenzi So any ideas? Should we still move the tests into |
Honestly not sure. Seems like too much trouble to make it work there. @patak-dev is it fine if we keep this new playground for now? |
When you use
server.origin
to add an origin prefix to paths in development, the assets plugins and plugin-vue transform the paths differently so that:Transforms differently. The first
img
tag won't have theserver.origin
as a prefix while the secondimg
tag will have it.The origin prefix is added to the path here in:
vite/packages/vite/src/node/plugins/asset.ts
Lines 176 to 177 in f6ae60d
So I simply add it in the same way when building the
base
fortransformAssetUrls
in plugin-vue.