Nuxt js 切换到生产环境时不加载图像

Question

说实话，我正在开发一个相当大的应用程序。当我在开发环境中工作时，一切都运行良好，没有错误或类似的东西。现在我切换到生产环境，我遇到了很多错误。 Nuxt 出于某种原因没有加载某些图像。我的图像存储在assets/**/* 下。

图片导入示例：

<img :src="require(~/assets/establishment_img/${image})" alt="preview image">

以下是错误：

nuxt-config.js

const path = require("path")

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "Estudiant Orientation",
    htmlAttrs: {
      lang: "en"
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" }
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "stylesheet",
        type: "text/css",
        href:
          "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
      }, // font-awesome css
      {
        rel: "stylesheet",
        type: "text/css",
        href:
          "https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.css"
      }, // swiper css
      {
        rel: "stylesheet",
        type: "text/css",
        href:
          "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
      }, // animate css
      {
        rel: "stylesheet",
        type: "text/css",
        href:
          "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.5/sweetalert2.min.css"
      } // sweetalert2 css
    ],
    script: [
      {
        hid: "stripe",
        src:
          "https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.min.js",
        defer: true
      }, // swiper js
      {
        hid: "stripe",
        src:
          "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.5/sweetalert2.all.js",
        defer: true
      }, // sweetalert2 js
      {
        hid: "stripe",
        src:
          "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js",
        defer: true
      }, // chart js
      {
        hid: "stripe",
        src: "https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js",
        defer: true
      }, // vue-chart js
      {
        hid: "stripe",
        src: "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js",
        defer: true
      }, // gsap js
      {
        hid: "stripe",
        src:
          "https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.5/ScrollTrigger.min.js",
        defer: true
      }, // ScrollTrigger js
      {
        hid: "stripe",
        src: "https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js",
        defer: true
      } // three js
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    "~/assets/css/global.css",
    "~/assets/css/animations.css",
    "~/assets/css/variables.css",
    "~/assets/css/dashboard-light.css",
    "~/assets/css/modal.css",
    "~/node_modules/vue-select/dist/vue-select.css"
  ],

  // Global JS
  js: [
    "~/node_modules/trading-vue-js/dist/trading-vue.min.js",
    "~/assets/js/hover-effect.umd.js" // distortion hover effect js
  ],

  //router active links
  router: {
    linkActiveClass: '--do-nothing',
    linkExactActiveClass: 'active',
  },

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: "~/plugins/_globals.js" },
    { src: "~/plugins/vue-chartkick.js", mode: "client" },
    { src: '~/plugins/vuex-persist.js', ssr: false},
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    "bootstrap-vue/nuxt",
    "@nuxtjs/proxy",
    "cookie-universal-nuxt",
    "@nuxtjs/bootstrap-vue",
  ],

  bootstrapVue: {
    bootstrapCSS: false,
    bootstrapVueCSS: false
  },

  // Specifying the build directory
  buildDir: path.resolve(__dirname, "../server/public"),

  // environment proxy
  proxy: {
    "/api": {
      target: "http://localhost:5000"
    }
  },

  router: {
    middleware: ["user-auth"]
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {}
};

这也是我在我的 index.js 中为服务器端所做的：

// Handling Production
if (process.env.NODE_ENV === 'production') {
    // Static Folder
    app.use(express.static(__dirname + '/public/'));

    // Handle SPA
    app.get(/.*/, (req, res) => res.send(__dirname + '/public/index.html'));
}

有没有办法解决这个问题？谢谢。

Answer 1

没有必要在你的 nuxt.js 应用中使用 require(~/assets/establishment_img/${image}) 构造！

您可以将您的静态图像放在您的 nuxt 项目根目录的 /static/ 文件夹中，然后在您的应用程序中使用：

<img :src="`/establishment_img/${image}`" alt="preview image">

因此它将在开发和生产模式下都可用