如果我在nuxtjs中更改router.base，如何链接到静态资源？

Question

默认情况下，我可以在Nuxtjs页面中使用这样的静态资源：

<img src="/img/logo.jpg"/>
...
<style>
.my-class {
  background-image: url("/img/background.jpg");
}
</style>

/img/logo.jpg和/img/background.jpg在<project>/static/目录下，并且可以正确呈现页面http://localhost:3000/some-page。

但是，如果我将router.base设置为这样的子路径：

export default {
  router: {
    base: '/demo',
  }
}

页面的URL将更改为http://localhost:3000/demo/some-page，但图像URL不会更改：http://localhost:3000/img/logo.jpg。

我应该在每个资源链接之前对子路径进行硬编码吗？为什么nuxtjs不会自动更改静态资源？

Answer 1

[我想我知道答案，不可能在img.src或css.url之前自动添加前缀，因为这些标签可能是通过数据绑定动态设置的，并且Nuxt或Vue-router无法在以下位置更改这些路径运行时。

如果使用<nuxt-link>或<router-link>标签建立链接，则将通过base选项自动添加路径，但是如果使用<a>则不会，这是正确的。

所以，我认为最好的答案是设置一个表示base值的全局变量，并像这样使用它：

<img :src="`${BASE}/img/logo.jpg`">