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

【问题标题】：all images disappear when i deploy my vue js app on netlify当我在 netlify 上部署我的 vue js 应用程序时，所有图像都消失了
【发布时间】：2021-04-16 15:46:22
【问题描述】：

我有一个待办事项列表应用程序，我尝试在 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);
}

【问题讨论】：

它是相对工作还是仅在文件开头使用@？
您能否提供该已部署应用的链接？
@BoussadjraBrahim musing-sammet-282a70.netlify.app 在这里
@kissu 仅以 ~@ 开头

标签： javascript vue.js web-deployment vuejs3

【解决方案1】：

图像可以正常工作并包含在内，但问题是 .dark 或 .light 类没有被应用。

看起来您在本地存储中设置了 theme 值，但 netlify 应用程序中不存在。

替换

const theme = localStorage.getItem('theme')

与

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

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

【讨论】：

switchTheme 里面有什么？
我的错，是复制粘贴的剩余部分。 switchTheme 不需要更新
你能澄清哪一部分不起作用吗？所有脚本的目的是确保此行运行body.classList.add(theme)，其中light 或dark 作为theme 值。它不会更新 localStorage
它不适用于dark 或light 当我在浏览器中打开localstorage时它显示light但它没有被应用
您是否更新了 netlify 应用程序？仍然显示相同的代码。如果主题预设为“浅色”或“深色”，它似乎无需任何更改即可工作，因此建议的代码更改仅针对 initial 值，不会影响 localStorage。