Question

我一直在使用Vue.js单个文件组件来构建网站，并非常享受模块化系统。但是，我遇到了一个问题，浏览器似乎在请求多个版本的资源，而不是每个版本仅请求一个URL。

HeaderBar.vue

<template>
    <div id="header" :class="{sticky: isSticking }">
        <img id="header-logo" src="../assets/logo/logo_horiz.svg">
        <div id="header-menubox">
            <a class="social-link" href="[scrubbed]" target="_blank">
                <img src="../assets/social/facebook_blue.svg">
            </a>
            <a class="img-link" href="[scrubbed]" target="_blank">
                <img src="../assets/social/twitter_blue.svg">
            </a>
            <a class="img-link" href="[scrubbed]" target="_blank">
                <img src="../assets/social/insta_blue.svg">
            </a>
            <a class="img-link" href="[scrubbed]" target="_blank">
                <img src="../assets/social/yelp_blue.svg">
            </a>
            <button id="header-menu-button" @click="toggleMenu">
                <img src="../assets/button/menu.svg">
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HeaderBar'
    }
</script>

<style scoped>
#header {
    position: sticky;
    width: 100%;
    padding: 1em;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 100;
    display: grid;
    grid-template-areas: "logo . menu";
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 1fr 1fr;
}

#header.sticky {
    background-color: #fff;
    box-shadow: 0 1em 2.5em rgba(0, 0, 0, 0.2);
}

#header-logo {
    grid-area: logo;
}

#header-menubox {
    grid-area: menu;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
}

#header-menu-button {
    background-color: unset;
    display: block;
    cursor: pointer;
    border: 0;
    grid-column: 3 / 4;
    grid-row: 2;
}
</style>

App.vue

<template>
  <div id="app">
    <HeaderBar></HeaderBar>
  </div>
</template>

<script>
import HeaderBar from './components/HeaderBar.vue'

export default {
  name: 'app',
  components: {
    HeaderBar
  }
}
</script>

<style>
#app {
  width: 100%;
}
</style>

vue.config.js

module.exports = {
  publicPath: '/'
}

Chrome开发者控制台

是什么原因导致这种行为？

[编辑] 我修改了HeaderBar.vue以导入图像：

<template>
    <div id="header" :class="{sticky: isSticking }">
        <img id="header-logo" :src="logoImg">
        <div id="header-menubox">
            <a class="social-link" href="[scrubbed]" target="_blank">
                <img :src="fbImg">
            </a>
            <a class="img-link" href="[scrubbed]" target="_blank">
                <img :src="twitImg">
            </a>
            <a class="img-link" href="[scrubbed]" target="_blank">
                <img :src="instaImg">
            </a>
            <a class="img-link" href="[scrubbed]" target="_blank">
                <img :src="yelpImg">
            </a>
            <button id="header-menu-button" @click="toggleMenu">
                <img :src="menuImg">
            </button>
        </div>
    </div>
</template>

<script>
    import logoImg from "../assets/logo/logo_horiz.svg"
    import fbImg from "../assets/social/facebook_blue.svg"
    import twitImg from "../assets/social/twitter_blue.svg"
    import instaImg from "../assets/social/insta_blue.svg"
    import yelpImg from "../assets/social/yelp_blue.svg"
    import menuImg from "../assets/button/menu.svg"

    export default {
        name: 'HeaderBar',
        data: function() {
            return {
                logoImg: logoImg,
                fbImg: fbImg,
                twitImg: twitImg,
                instaImg: instaImg,
                yelpImg: yelpImg,
                menuImg: menuImg
            }
        }
    }
</script>

<style scoped>
#header {
    position: sticky;
    width: 100%;
    padding: 1em;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 100;
    display: grid;
    grid-template-areas: "logo . menu";
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 1fr 1fr;
}

#header.sticky {
    background-color: #fff;
    box-shadow: 0 1em 2.5em rgba(0, 0, 0, 0.2);
}

#header-logo {
    grid-area: logo;
}

#header-menubox {
    grid-area: menu;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
}

#header-menu-button {
    background-color: unset;
    display: block;
    cursor: pointer;
    border: 0;
    grid-column: 3 / 4;
    grid-row: 2;
}
</style>

现在我的错误更少了，但是所请求的URL看起来更加陌生：

Answer 1

您应该让webpack处理此问题。

您使用的加载程序插件很可能无法处理svgs。

选中config/webpack.config.js或build/webpack.base.conf.js并找到图像规则（它应该与png，jpeg，gif匹配）。

在该正则表达式中添加svg。您最终会得到类似的结果

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

Answer 2

您必须将它们导入组件的javascript部分，然后将它们分配给元素。

或者至少是我要让它工作的方式。

<template>
    <div id = "imgcontainer"> 
      <img v-bind:src="image"/> 
    </div>
</template>

<script> 
  import img1 from "../assets/1.jpg" 
  export default { 
    data(){
      return{
        image: '', 
      };
    },
    beforeCreate(){
     this.image = img1
    },
  } 
</script>

应该解决您的问题，实际上，它应该解决您所有的生活问题

Vue.js + Webpack请求多个不正确的资源URL

2 个答案: