Блог

Честно говоря, я работаю над довольно большим приложением. Когда я работал над средой разработки, все работало хорошо, никаких ошибок или чего-то подобного. Теперь, когда я переключился на производственную среду, я получаю много ошибок. 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'));
}
 

Есть ли способ решить эту проблему? Спасибо.

Нет необходимости использовать require(~/assets/establishment_img/${image}) конструкцию в вашем nuxt.js приложение!

Вы можете просто поместить свое статическое изображение в папку /static/ в корневом каталоге проекта nuxt и получить доступ к нему в своем приложении с помощью:

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

Таким образом, он будет доступен как в режиме разработки, так и в режиме производства