IndieShow 图标IndieShow 使用文档

站点配置

配置 IndieShow 项目的基础信息,包括站点名称、URL、API 路径等

本文档将帮助你配置 IndieShow 项目的基础站点信息。

站点配置项

基础配置

变量名称变量描述默认值
NUXT_PUBLIC_SITE_NAME站点名称(显示在浏览器标签和整个网站中)IndieShow
NUXT_PUBLIC_SITE_URL站点 URL(用于生成站点地图和规范链接)https://indieshow-nuxt.waveany.com

不同环境配置

开发环境

变量名称变量描述推荐值
NUXT_PUBLIC_SITE_URL开发环境地址http://localhost:3000

生产环境

变量名称变量描述推荐值
NUXT_PUBLIC_SITE_URL生产环境地址https://你的域名.com

配置示例

在配置文件中使用

app.config.ts
export default defineAppConfig({
  defaults: {
    titleTemplate: `%s - ${process.env.NUXT_PUBLIC_SITE_NAME}`,
    author: "IndieShow Team",
    ogImage: "/images/social/og-image.svg",
  },
})

在组件中使用

components/xxx.vue
<script setup lang="ts">
const config = useRuntimeConfig()
 
// 获取站点名称
const siteName = config.public.siteName
 
// 获取站点 URL
const siteUrl = config.public.siteUrl
</script>
 
<template>
  <div>
    <h1>{{ siteName }}</h1>
    <a :href="siteUrl">访问网站</a>
  </div>
</template>

在 API 路由中使用

server/api/config.ts
export default defineEventHandler(() => {
  const config = useRuntimeConfig()
  
  return {
    siteName: config.public.siteName,
    siteUrl: config.public.siteUrl,
  }
})

常见问题

下一步

目录