NuxtImage 配置上传目录配置

NuxtImage 配置上传目录配置

json 复制代码
// https://nuxt.com/docs/api/configuration/nuxt-config
import { join } from 'path'

export default defineNuxtConfig({
  compatibilityDate: "2025-07-15",
  devtools: { enabled: true },
  app: {
    head: {
      title: "XJ",
      link: [
        {
          rel: "icon",
          href: "/images/favicon.ico",
        },
      ],
    },
  },
  modules: [
    "@nuxt/eslint",
    "@nuxt/image",
    "@nuxt/scripts",
    "@nuxt/ui",
    "nuxt-icons",
    "@nuxtjs/i18n"
  ],
  // 某些v-if里的图片无法加载
  nitro: {
    // [新配置] 将根目录下的 uploads 文件夹挂载为公共资源
    // 这样 Nitro 会直接服务这个目录下的文件,无需 Nginx 或自定义 API
    publicAssets: [
      {
        baseURL: '/uploads',
        dir: join(process.cwd(), 'uploads'),
        maxAge: 60 * 60 * 24 * 30, // 缓存 30 天
      }
    ],
    prerender: {
      routes: [
        "/_ipx/f_webp,avif,png&q_80/images/card_bg_1_xl.png",
        "/_ipx/f_webp,avif,png&q_80/images/card_bg_1_2xl.png",
        "/_ipx/f_webp,avif,png&q_80/images/card_bg_2_xl.png",
        "/_ipx/f_webp,avif,png&q_80/images/card_bg_3_xl.png",
        "/_ipx/f_webp,avif,png&q_80/images/card_bg_3_2xl.png",
        "/_ipx/f_webp,avif,png&q_80&s_457x534/images/contact_us_img.png",
        "/_ipx/f_webp,avif,png&q_80/images/contact_us_img_2.png",
      ],
    },
  },

  css: ["~/assets/css/main.css"],

  image: {
    domains: ['localhost', 'gwweb.gametest6.com'],
    alias: {
    // upload 目录需要挂载,并且能够访问
      '/uploads': process.env.NODE_ENV === 'production' ? 'https://mydomain/uploads' : 'http://localhost:3000/uploads'
    }
  },

  i18n: {
    defaultLocale: "en",
    locales: [
      {
        code: "en",
        name: "English",
        file: "en.json",
        icon: "/images/flag_en.png",
      },
      {
        code: "cn",
        name: "China",
        file: "cn.json",
        icon: "/images/flag_ch.png",
      },
    ],
  },
});
相关推荐
牛奶2 小时前
2026年大模型怎么选?前端人实用对比
前端·人工智能·ai编程
牛奶2 小时前
前端人为什么要学AI?
前端·人工智能·ai编程
Kagol4 小时前
🎉OpenTiny NEXT-SDK 重磅发布:四步把你的前端应用变成智能应用!
前端·开源·agent
GIS之路5 小时前
ArcGIS Pro 中的 notebook 初识
前端
JavaGuide6 小时前
7 道 RAG 基础概念知识点/面试题总结
前端·后端
ssshooter6 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
格砸7 小时前
从入门到辞职|从ChatGPT到OpenClaw,跟上智能时代的进化
前端·人工智能·后端
Live000007 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉7 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化