Netlify构建导致读取未定义的错误vuejs

Question

我正在尝试在vuejs中开发一个应用程序，并使用netlify进行部署。请注意，我对vuejs非常陌生。我在生产中没有警告或错误，但在部署时，网站是空白的，控制台中出现以下错误：

TypeError: Cannot read properties of undefined (reading 'currentPath')
at index.7d385d0f.js:54:2330
at ls (index.7d385d0f.js:1:23187)
at Proxy.<anonymous> (index.7d385d0f.js:54:2247)
at vn (index.7d385d0f.js:1:15170)
at Jn.b [as fn] (index.7d385d0f.js:1:38048)
at Jn.run (index.7d385d0f.js:1:4525)
at G.c.update (index.7d385d0f.js:1:38314)
at G (index.7d385d0f.js:1:38340)
at rt (index.7d385d0f.js:1:37206)
at ve (index.7d385d0f.js:1:37000)

我只使用"；currentPath"；在一个文件中：

在<脚本>标签：

export default {
data: {
currentPath: "",
},
data() {
return {
currentPath: window.location.hash || "",
};
},
computed: {
currentView() {
return routes[this.currentPath.slice(1) || "/"].route || NotFound;
},
},
mounted() {
window.addEventListener("hashchange", () => {
this.currentPath = window.location.hash || "";
});
},
};

在我的html:中

<template>
<notifications />
<header class="header">
<a
v-for="(route, url) in routes"
:key="route.name"
class="header-item"
:class="{ 'header-item-current': this.currentPath === `#${url}` }"
:href="`#${url}`"
>
{{ route.name }}
</a>
</header>
<component class="content" :is="currentView" />
</template>

Answer 1

好吧，似乎没有必要(甚至会导致问题(使用"this"在vuejs SFC的html中。我已更改

<a
v-for="(route, url) in routes"
:key="route.name"
class="header-item"
:class="{ 'header-item-current': this.currentPath === `#${url}` }"
:href="`#${url}`"
>
{{ route.name }}
</a>

至

<a
v-for="(route, url) in routes"
:key="route.name"
class="header-item"
:class="{ 'header-item-current': currentPath === `#${url}` }"
:href="`#${url}`"
>
{{ route.name }}
</a>

不仅错误消失了，而且一切都很好！