直接上解决办法: 首先在登录界面Login.vue页面中

Login.vue

<template>
  <div id="login" ></div>
</template>

<script>
    export default {
   
        name: "Login"
    }
</script>

<style scoped>
  #login{
   
    background:url("../assets/背景图.jpg");
    height:100%;			//大小设置为100%
    position:fixed;
    background-size:100% 100%;}
</style>

一.template标签中写一个最外层的div

<div id="login" ></div>

二.然后style标签中写(图片路径换成自己的)

#login{
   
    background:url("../assets/背景图.jpg");
    height:100%;	//大小设置为100%
    position:fixed;
    background-size:100% 100%;
}

三.这个时候可能还看不到效果,没有图片是白屏

写一个样式表:改变html 和body 和 # app的范围.

四.然后将这个文件导入到 main.js文件中

按自己的情况添加自己的路径

总的来说一共就三步:

1.在Login.vue中添加上面代码

2.编写css样式表

3.在main.js中导入样式表

完成结果图: