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",
      },
    ],
  },
});
相关推荐
Mr_chiu2 小时前
AI加持的交互革新:手把手教你用Vue3打造智能模板输入框
前端
精神状态良好2 小时前
告别聊天式编程:引入 OpenSpec,构建结构化的 AI 开发工作流
前端
WangHappy2 小时前
出海不愁!用Vue3 + Node.js + Stripe实现全球支付
前端·node.js
林希_Rachel_傻希希2 小时前
手写Promise最终版本
前端·javascript·面试
visnix2 小时前
AI大模型-LLM原理剖析到训练微调实战(第二部分:大模型核心原理与Transformer架构)
前端·llm
老妪力虽衰2 小时前
零基础的小白也能通过AI搭建自己的网页应用
前端
褪色的笔记簿2 小时前
在 Vue 项目里管理弹窗组件:用 ref 还是用 props?
前端·vue.js
Danny_FD2 小时前
使用Taro实现微信小程序仪表盘:使用canvas实现仪表盘(有仪表盘背景,也可以用于Web等)
前端·taro·canvas
掘金安东尼2 小时前
VSCode V1.107 发布(2025 年 11 月)
前端·visual studio code