Nuxt 3 - 如何自定义SPA加载SVG？

方法1：自定义加载组件（推荐） #

Nuxt 2支持通过配置指定自定义加载组件，直接替换默认的山脉SVG：

• 在项目根目录新建components/Loading.vue，写入你的自定义加载内容，比如：

<template>
  <div class="custom-loader">
    <!-- 这里放你的自定义logo或动画 -->
    <img src="/logo.svg" alt="加载中" />
    <p>正在加载，请稍候...</p>
  </div>
</template>

<style scoped>
.custom-loader {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
</style>

• 打开nuxt.config.js，添加加载组件配置：

export default {
  ssr: false,
  loading: '~/components/Loading.vue'
}

启动项目后，Nuxt就会用你写的组件作为初始化加载动画。

方法2：修改HTML模板替换加载内容 #

如果不想用组件，也可以直接修改Nuxt的入口HTML：

• 项目根目录新建app.html（没有的话直接创建），复制Nuxt默认模板结构，找到<div id="nuxt-loading">区域，替换成你的自定义内容：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
    <div id="nuxt-loading">
      <!-- 替换成你的自定义加载元素 -->
      <img src="/logo.svg" alt="加载中" />
    </div>
  </body>
</html>

• 把你的自定义资源（比如logo.svg）放在static目录下，这样可以直接通过/logo.svg访问。

方法3：用CSS覆盖内置SVG（快速替换） #

如果只是想换图标、不想改逻辑，用CSS覆盖即可：

• 在assets/css/main.css中添加样式：

#nuxt-loading svg {
  display: none; /* 隐藏默认山脉SVG */
}
#nuxt-loading::before {
  content: '';
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  background: url('/logo.svg') no-repeat center center;
  background-size: contain;
}

这种方式简单直接，无需修改组件或模板。

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