antfu-collective / vitesse

🏕 Opinionated Vite + Vue Starter Template
https://vitesse.netlify.app/
MIT License
8.86k stars 933 forks source link

alias with ~ error in <img /> usage #429

Closed a1mersnow closed 2 years ago

a1mersnow commented 2 years ago

Describe the bug

In the src/pages/index.vue, I reference src/static/pwa.png via <img src="~/static/pwa.png" />, which report an error said:

image

Reproduction

https://github.com/aimergenge/vitesse

System Info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 72.88 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 105.0.1
    Safari: 16.0

Used Package Manager

pnpm

Validations

a1mersnow commented 2 years ago

But If I add a same record(but replace ~ with @) to resolve.alias:

resolve: {
  alias: {
    '~/': `${path.resolve(__dirname, 'src')}/`,
    '@/': `${path.resolve(__dirname, 'src')}/`,
  },
},

And replace <img src="~/static/pwa.png" /> with <img src="@/static/pwa.png" />, it just works!

a1mersnow commented 2 years ago

Closed because I think it's caused by vite or @vitejs/plugin-vue