When other components use the path, baseurl becomes invalid #3459

hairyf · 2021-05-18T02:53:23Z

Describe the bug

Use the img tag src to import the path. After packaging, the baseurl is normal. After using the el-image tag src to import the path, the path does not change.

Reproduction

I think this question does not need to provide a link

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz
    Memory: 6.20 GB / 15.94 GB
  Binaries:
    Node: 14.15.4 - D:\software\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.5.6 - D:\software\nodejs\npm.CMD
  npmPackages:
    @vitejs/plugin-vue: ^1.1.5 => 1.2.2 
    vite: ^2.1.1 => 2.3.2

Used package manager:

Logs

  vite:config bundled config file loaded in 122ms +0ms
  vite:config using resolved config: {
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object], [Object] ] },
  vite:config   base: '/addons/weitshop_shop/weshop/public/home/backend/',
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   server: {
  vite:config     fsServe: {
  vite:config       root: 'F:/projects/橘子互联/橘子商城/modern-admin-template',
  vite:config       strict: false
  vite:config     }
  vite:config   },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: 'F:/projects/橘子互联/橘子商城/modern-admin-template/vite.config.ts',
  vite:config   configFileDependencies: [ 'vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: { fsServe: [Object] }
  vite:config   },
  vite:config   root: 'F:/projects/橘子互联/橘子商城/modern-admin-template',
  vite:config   publicDir: 'F:\\projects\\橘子互联\\橘子商城\\modern-admin-template\\public',
  vite:config   cacheDir: 'F:\\projects\\橘子互联\\橘子商城\\modern-admin-template\\node_modules\\.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   env: {
  vite:config     BASE_URL: '/addons/weitshop_shop/weshop/public/home/backend/',
  vite:config     MODE: 'development',
  vite:config     DEV: true,
  vite:config     PROD: false
  vite:config   },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +6ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  vite v2.3.2 dev server running at:

  > Local: http://localhost:3000/addons/weitshop_shop/weshop/public/home/backend/
  > Network: use `--host` to expose

  ready in 316ms.

  vite:time 1ms   / +0ms
  vite:spa-fallback Rewriting GET / to /index.html +0ms
  vite:time 14ms  /index.html +25ms
  vite:resolve 1ms   \projects\橘子互联\橘子商城\modern-admin-template\node_modules\vite\dist\client/client -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/vite/dist/client/client.js +0ms
  vite:resolve 2ms   /@vite/client -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/vite/dist/client/client.js +1ms
  vite:load 2ms   [fs] /@vite/client +0ms
  vite:resolve 1ms   ./env -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/vite/dist/client/env.js +12ms
  vite:resolve 1ms   /node_modules/vite/dist/client/env.js -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/vite/dist/client/env.js +1ms
  vite:transform 8ms   /@vite/client +0ms
  vite:time 17ms  /@vite/client +52ms
  vite:resolve 0ms   /src/main.ts -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/main.ts +2ms
  vite:load 1ms   [fs] /src/main.ts +13ms
  vite:resolve 0ms   vue -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/vue.js?v=40e81ce4 +7ms
  vite:resolve 1ms   /node_modules/.vite/vue.js?v=40e81ce4 -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/vue.js?v=40e81ce4 +1ms
  vite:resolve 0ms   ./App.vue -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/App.vue +0ms
  vite:resolve 1ms   /src/App.vue -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/App.vue +1ms
  vite:resolve 0ms   \projects\橘子互联\橘子商城\modern-admin-template\src/plugins/use-components -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/plugins/use-components.ts +0ms
  vite:resolve 1ms   @/plugins/use-components -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/plugins/use-components.ts +1ms
  vite:resolve 0ms   /src/plugins/use-components.ts -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/plugins/use-components.ts +0ms
  vite:transform 8ms   /src/main.ts +12ms
  vite:time 11ms  /src/main.ts +12ms
  vite:load 0ms   [fs] /src/App.vue +25ms
  vite:resolve 0ms   \projects\橘子互联\橘子商城\modern-admin-template\src/assets/logo.png -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/assets/logo.png +49ms  vite:resolve 0ms   @/assets/logo.png -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/assets/logo.png +0ms
  vite:resolve 0ms   /src/assets/logo.png -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/assets/logo.png +1ms
  vite:resolve 1ms   /src/App.vue?vue&type=style&index=0&lang.css -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/App.vue?vue&type=style&index=0&lang.css +1ms  
  vite:hmr [self-accepts] src\App.vue +0ms
  vite:transform 34ms  /src/App.vue +51ms
  vite:time 36ms  /src/App.vue +51ms
  vite:load 0ms   [fs] /src/plugins/use-components.ts +38ms
  vite:resolve 0ms   vue-echarts -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/vue-echarts.js?v=40e81ce4 +6ms
  vite:resolve 0ms   /node_modules/.vite/vue-echarts.js?v=40e81ce4 -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/vue-echarts.js?v=40e81ce4 +0ms  vite:resolve 0ms   \projects\橘子互联\橘子商城\modern-admin-template\src/components/ColorPickr/index.vue -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/components/ColorPickr/index.vue +1ms
  vite:resolve 1ms   @/components/ColorPickr/index.vue -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/components/ColorPickr/index.vue +1ms
  vite:resolve 1ms   /src/components/ColorPickr/index.vue -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/components/ColorPickr/index.vue +1ms
  vite:resolve 0ms   \projects\橘子互联\橘子商城\modern-admin-template\src/components/TinymceEditor/index.vue -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/components/TinymceEditor/index.vue +1ms
  vite:resolve 0ms   @/components/TinymceEditor/index.vue -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/components/TinymceEditor/index.vue +0ms
  vite:resolve 0ms   /src/components/TinymceEditor/index.vue -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/components/TinymceEditor/index.vue +1ms
  vite:transform 8ms   /src/plugins/use-components.ts +12ms
  vite:time 10ms  /src/plugins/use-components.ts +12ms
  vite:load 0ms   [fs] /node_modules/vite/dist/client/env.js +11ms
  vite:rewrite 0ms   [no imports] node_modules\vite\dist\client\env.js +0ms
  vite:transform 1ms   /node_modules/vite/dist/client/env.js +4ms
  vite:time 3ms   /node_modules/vite/dist/client/env.js +4ms
  vite:load 0ms   [plugin] /src/assets/logo.png +8ms
  vite:rewrite 0ms   [no imports] src\assets\logo.png +8ms
  vite:transform 0ms   /src/assets/logo.png +7ms
  vite:time 3ms   /src/assets/logo.png?import +8ms
  vite:load 1ms   [plugin] /src/App.vue?vue&type=style&index=0&lang.css +5ms
  vite:hmr [self-accepts] src\App.vue?vue&type=style&index=0&lang.css +44ms
  vite:transform 16ms  /src/App.vue?vue&type=style&index=0&lang.css +20ms
  vite:time 19ms  /src/App.vue?vue&type=style&index=0&lang.css +20ms
  vite:load 0ms   [fs] /src/components/ColorPickr/index.vue +19ms
[@vue/compiler-sfc] <script setup> is still an experimental proposal.
Follow its status at https://github.com/vuejs/rfcs/pull/227.

[@vue/compiler-sfc] When using experimental features,
it is recommended to pin your vue dependencies to exact versions to avoid breakage.

  vite:resolve 0ms   @vue/runtime-core -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/@vue_runtime-core.js?v=40e81ce4 +55ms
  vite:resolve 1ms   /node_modules/.vite/@vue_runtime-core.js?v=40e81ce4 -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/@vue_runtime-core.js?v=40e81ce4 +1ms
  vite:resolve 1ms   /src/components/ColorPickr/index.vue?vue&type=style&index=0&lang.scss -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/components/ColorPickr/index.vue?vue&type=style&index=0&lang.scss +1ms
  vite:hmr [self-accepts] src\components\ColorPickr\index.vue +24ms
  vite:transform 21ms  /src/components/ColorPickr/index.vue +25ms
  vite:time 23ms  /src/components/ColorPickr/index.vue +24ms
  vite:load 10ms  [fs] /src/components/TinymceEditor/index.vue +22ms
  vite:load 0ms   [plugin] /src/components/ColorPickr/index.vue?vue&type=style&index=0&lang.scss +25ms
  vite:hmr [self-accepts] src\components\ColorPickr\index.vue?vue&type=style&index=0&lang.scss +236ms
  vite:transform 209ms /src/components/ColorPickr/index.vue?vue&type=style&index=0&lang.scss +235ms
  vite:time 212ms /src/components/ColorPickr/index.vue?vue&type=style&index=0&lang.scss +236ms
  vite:resolve 0ms   @vue/reactivity -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/@vue_reactivity.js?v=40e81ce4 +248ms
  vite:resolve 0ms   /node_modules/.vite/@vue_reactivity.js?v=40e81ce4 -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/@vue_reactivity.js?v=40e81ce4 +0ms
  vite:resolve 0ms   tinymce -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/tinymce.js?v=40e81ce4&es-interop +1ms
  vite:resolve 0ms   /node_modules/.vite/tinymce.js?v=40e81ce4&es-interop -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/tinymce.js?v=40e81ce4&es-interop +0ms
  vite:resolve 0ms   @tinymce/tinymce-vue -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/@tinymce_tinymce-vue.js?v=40e81ce4 +4ms
  vite:resolve 0ms   /node_modules/.vite/@tinymce_tinymce-vue.js?v=40e81ce4 -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/@tinymce_tinymce-vue.js?v=40e81ce4 +1ms
  vite:resolve 1ms   ./imageSelector -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/components/TinymceEditor/imageSelector.ts +1ms
  vite:resolve 0ms   /src/components/TinymceEditor/imageSelector.ts -> F:/projects/橘子互联/橘子商城/modern-admin-template/src/components/TinymceEditor/imageSelector.ts +0ms
  vite:hmr [self-accepts] src\components\TinymceEditor\index.vue +20ms
  vite:resolve 0ms   /node_modules/.vite/tinymce.js?v=40e81ce4 -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/tinymce.js?v=40e81ce4 +2ms        
  vite:transform 256ms /src/components/TinymceEditor/index.vue +22ms
  vite:time 269ms /src/components/TinymceEditor/index.vue +22ms
  vite:load 0ms   [fs] /src/components/TinymceEditor/imageSelector.ts +244ms
  vite:rewrite 0ms   [no imports] src\components\TinymceEditor\imageSelector.ts +316ms
  vite:transform 2ms   /src/components/TinymceEditor/imageSelector.ts +15ms
  vite:time 4ms   /src/components/TinymceEditor/imageSelector.ts +14ms
  vite:resolve 1ms   /node_modules/.vite/vue.js -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/vue.js +136ms
  vite:time 4ms   /node_modules/.vite/vue.js.map +123ms
  vite:resolve 0ms   /node_modules/.vite/chunk-LKQPQPHF.js -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/chunk-LKQPQPHF.js +10ms
  vite:time 3ms   /node_modules/.vite/chunk-LKQPQPHF.js.map +9ms
  vite:time 0ms   /src/assets/logo.png +33ms
  vite:resolve 0ms   /node_modules/.vite/@vue_runtime-core.js -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/@vue_runtime-core.js +41ms
  vite:resolve 0ms   /node_modules/.vite/@vue_reactivity.js -> F:/projects/橘子互联/橘子商城/modern-admin-template/node_modules/.vite/@vue_reactivity.js +2ms
  vite:time 4ms   /node_modules/.vite/@vue_runtime-core.js.map +9ms
  vite:time 3ms   /node_modules/.vite/@vue_reactivity.js.map +1ms
  vite:time 2ms   /favicon.ico +77ms
  vite:time 0ms   / +450ms
  vite:spa-fallback Rewriting GET / to /index.html +1s
  vite:time 2ms   /index.html +11ms
  vite:cache [304] /@vite/client +0ms
  vite:time 1ms   /@vite/client +34ms
  vite:cache [304] /src/main.ts +2ms
  vite:time 1ms   /src/main.ts +2ms
  vite:cache [304] /src/App.vue +16ms
  vite:time 0ms   /src/App.vue +16ms
  vite:cache [304] /src/plugins/use-components.ts +1ms
  vite:time 1ms   /src/plugins/use-components.ts +2ms
  vite:cache [304] /node_modules/vite/dist/client/env.js +2ms
  vite:time 1ms   /node_modules/vite/dist/client/env.js +2ms
  vite:cache [304] /src/assets/logo.png +10ms
  vite:time 1ms   /src/assets/logo.png?import +10ms
  vite:cache [304] /src/App.vue?vue&type=style&index=0&lang.css +2ms
  vite:time 1ms   /src/App.vue?vue&type=style&index=0&lang.css +1ms
  vite:cache [304] /src/components/ColorPickr/index.vue +4ms
  vite:time 2ms   /src/components/ColorPickr/index.vue +5ms
  vite:cache [304] /src/components/TinymceEditor/index.vue +2ms
  vite:time 1ms   /src/components/TinymceEditor/index.vue +1ms
  vite:cache [304] /src/components/ColorPickr/index.vue?vue&type=style&index=0&lang.scss +5ms
  vite:time 1ms   /src/components/ColorPickr/index.vue?vue&type=style&index=0&lang.scss +6ms
  vite:cache [304] /src/components/TinymceEditor/imageSelector.ts +18ms
  vite:time 1ms   /src/components/TinymceEditor/imageSelector.ts +17ms
  vite:time 0ms   /src/assets/logo.png +29ms
  vite:time 1ms   /favicon.ico +39ms

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

[√] Read the Contributing Guidelines.
[√] Read the docs.
[√] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[√] Provide a description in this issue that describes the bug.
[√] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
[√] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

The text was updated successfully, but these errors were encountered:

haoqunjiang · 2021-05-18T08:19:13Z

Please set the template.transformAssetUrls option in the vue plugin config.

Here are the references:
https://github.com/vitejs/vite/tree/main/packages/plugin-vue#options
https://github.com/vuejs/vue-next/blob/4f17be7b1ce4872ded085a36b95c1897d8c1f299/packages/compiler-sfc/src/compileTemplate.ts#L67

The format is like this:
https://github.com/vuejs/vue-next/blob/4f17be7b1ce4872ded085a36b95c1897d8c1f299/packages/compiler-sfc/src/templateTransformAssetUrl.ts#L36-L46

Maybe we should document this in the plugin README.

manongLY · 2021-08-09T04:26:22Z

@sodatea vite2 build image path 404 #4060 I can't solve the problem now. I don't know what to do. Could you help me?

hairyf added the pending triage label May 18, 2021

haoqunjiang added documentation Improvements or additions to documentation plugin: vue and removed pending triage labels May 18, 2021

haoqunjiang mentioned this issue Jul 2, 2021

vite2 build image path 404 #4060

Closed

6 tasks

bluwy mentioned this issue Mar 9, 2022

docs(vue): add transformAssetUrls example #7232

Merged

9 tasks

patak-dev closed this as completed in #7232 Mar 9, 2022

github-actions bot locked and limited conversation to collaborators Mar 24, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

When other components use the path, baseurl becomes invalid #3459

When other components use the path, baseurl becomes invalid #3459

hairyf commented May 18, 2021

haoqunjiang commented May 18, 2021

manongLY commented Aug 9, 2021

When other components use the path, baseurl becomes invalid #3459

When other components use the path, baseurl becomes invalid #3459

Comments

hairyf commented May 18, 2021

Describe the bug

Reproduction

System Info

Logs

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

haoqunjiang commented May 18, 2021

manongLY commented Aug 9, 2021