如何在Svelte组件中通过window.location.href跳转至静态HTML页面？

不需要额外配置路由，直接通过window.location.href即可实现跳转，核心是确保路径指向正确。结合你的项目结构，分两种场景说明：

开发环境 #

Svelte开发服务器默认以svelteProject目录作为服务根路径，而example.html位于其上级的project目录下。在App.svelte中使用上级相对路径即可跳转：

<script>
  function navigateToExample() {
    window.location.href = '../example.html';
  }
</script>

<button on:click={navigateToExample}>打开example.html</button>

这里的../表示从服务根路径（svelteProject）向上回到project目录，直接定位到目标HTML文件。

生产环境 #

当你打包Svelte项目后，默认会在svelteProject下生成dist文件夹。根据部署方式调整路径：

• 如果将dist内的所有文件直接移至project目录下（与example.html同级），路径改为./example.html；
• 如果保留svelteProject/dist的结构，部署后Svelte应用的访问路径为/svelteProject/dist/，则路径需改为../../example.html（向上两级回到project目录）。

关键注意点 #

• 跳转外部静态HTML不属于Svelte路由的管理范围，无需配置SvelteKit或其他路由工具；
• 可以通过在浏览器控制台输入console.log(window.location.pathname)查看当前页面的路径，以此验证相对路径的正确性。

内容的提问来源于stack exchange，提问作者Clemens Rosenow