当我在 netlify 上部署我的 vue js 应用程序时，所有图像都消失了

Question

我有一个待办事项列表应用程序我尝试将它部署在 Netlify 上它已部署但所有图像都消失了我不知道为什么，注意：这是我第一次使用 Vue js 或任何框架。，注意：当我运行服务时，一切都显示正常，

这是我使用图片的方式

:root {
      --bg-mobile-light: url("~@/assets/bg-mobile-light.jpg");
    --bg-desktop-light: url("~@/assets/bg-desktop-light.jpg");
    --theme-icon-light: url("~@/assets/icon-moon.svg");
    --check-icon: url("~@/assets/icon-check.svg");
    --bg-mobile-dark: url("~@/assets/bg-mobile-dark.jpg");
    --bg-desktop-dark: url("~@/assets/bg-desktop-dark.jpg");
    --theme-icon-dark: url(" ~@/assets/icon-sun.svg"); 
}
.dark {
    --header-img:var(--bg-desktop-dark);
    --theme-icon:var(--theme-icon-dark);
    --header-img-mobile:var(--bg-mobile-dark);
}

 .light {
    --header-img:var(--bg-desktop-light);
    --theme-icon:var(--theme-icon-light);
    --header-img-mobile:var(--bg-mobile-light);
 }

.header {
    background-image: var(--header-img);
}

.themeSwitch-label {
    background-image: var(--theme-icon);
}

Answer 1

图像正常并包含在内，但问题是 .dark 或 .light 类未应用。

您似乎在本地存储中设置了一个 theme 值，但 netlify 应用程序中没有。

替换

const theme = localStorage.getItem('theme')

和

let theme = localStorage.getItem('theme');
if (theme !== 'dark') theme = 'light'

这将确保始终存在默认值，并且只允许 light 或 dark

当我在 netlify 上部署我的 vue js 应用程序时，所有图像都消失了

all images disappear when i deploy my vue js app on netlify

javascript

web-deployment

vue.js

vuejs3