如何在Vue CLI 2.9.6版本中配置特定网页背景图片?
时间: 2024-12-12 07:22:54 浏览: 9
在Vue CLI 2.9.6版本中,虽然版本较旧,但设置页面背景图片的基本步骤仍然适用于现代的Vue应用。以下是配置步骤:
1. **在`src`文件夹下创建背景图文件**:
将你的背景图片放在`src/assets/images`或其他你自定义的资源目录中,假设名字是`background.jpg`。
2. **在CSS中引用背景图片**:
在`src/App.vue`文件中找到`.vue`组件的`style`标签,并添加样式规则来设置背景。例如:
```html
<template>
<div id="app">
<!-- ...其他内容 -->
</div>
</template>
<script>
// ...
</script>
<style scoped>
body {
background-image: url("~@/assets/images/background.jpg");
/* 或者使用相对路径 */
/* background-image: url(./assets/images/background.jpg); */
background-size: cover;
background-repeat: no-repeat;
}
</style>
```
这里的`~`符号是Vue CLI提供的别名,它会自动将路径从`src/assets/images`转换为实际的URL,所以不需要手动更改构建后的路径。
如果你有多个布局需要设置不同的背景图片,可以在CSS中选择器对应的地方单独设置背景图片。
阅读全文