知识库

Appearance

打包后静态资源路径问题 ​

html
<!-- bad -->
<img src="/src/assets/vue.svg" >

<!-- dist -->
<img src="/src/assets/vue.svg" >
html
<!-- good -->
<img src="./assets/vue.svg" >

<!-- dist -->
<img src="/assets/vue.svg" >
html
<!-- good -->
<!-- @ -> path.resolve(__dirname, 'src') -->
<img src="@/assets/vue.svg" >

<!-- dist -->
<img src="/assets/vue.svg" >

或者通过变量来决定路径前缀

js
const assetsPath = /^(localhost|127\.0\.0\.1)$/.test(location.hostname)
  ? '/src/assets' // development
  : '/assets' // production

<img :src="`${ assetsPath }/vue.svg`" >