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

Posted 2023-02-22

【中文标题】Vue.js + Webpack 请求多个不正确的资源 URL

【英文标题】：Vue.js + Webpack Requesting Multiple Incorrect Resource URLs

【发布时间】：2019-08-10 06:58:59

【问题描述】：

我一直在使用 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 看起来更奇怪：

【参考方案1】：

你应该让webpack处理这个。

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

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

将svg 添加到该正则表达式。你最终会得到类似的东西

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

【参考方案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>

这应该可以解决你的问题，事实上，它应该可以解决你所有的生活问题

【讨论】：

哦，我明白了，看起来图像包含在组件中的方式与主应用程序实例不同。相关：***.com/questions/45116796/…我试试看

好吧，我离得更近了（错误更少），但它似乎在请求/[object Module]，这对我来说似乎更陌生（见帖子编辑）。有什么想法吗？

试试 v-bind:src :D

谢谢。我无法确定具体问题，但在使用 webpack 的相对路径时似乎会发生很多问题。我尝试使用@/assets/ 而不是../assets/，但也没有用

让我们continue this discussion in chat.