我一直在使用 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: '/'
}
是什么导致了这种行为?
[编辑]
我修改了 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>
最佳答案
你应该让 webpack
处理这个。
很可能您使用的加载器插件无法处理 svgs
。
检查 config/webpack.config.js
或 build/webpack.base.conf.js
并找到图像规则(它应该匹配 png、jpeg , gif).
将 svg
添加到该正则表达式。你最终会得到类似的东西
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
关于javascript - Vue.js + Webpack 请求多个不正确的资源 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55246261/