Как обслуживать ссылки cdn для ресурсов в NuxtJS?

Question

Я работаю над NUXTJs для создания веб-сайта на стороне сервера. Мой вопрос заключается в том, что, хотя в структуре проекта nuxt есть папка assets / static для изображений и статических файлов, я хочу установить ссылку cdn для всего моего источника изображений. Каков наилучший подход для этого?

Возможные способы, которыми я могу придумать:

1. Vuex Store - установить baseURL для изображений, а затем использовать в компонентах
2. env - использовать переменную окружения для установки URL cdn

ТИА

Answer 1

Вы можете установить его через свойство publicPath в nuxt.config

export default {
  build: {
    publicPath: 'https://cdn.nuxtjs.org'
  }
}

https://nuxtjs.org/api/configuration-build/

Answer 2

Хорошо, потратив пару часов, как указано выше, вы можете установить URL-адрес cdn в файл. Если вы, как и я, используете корзину CloudFront/S3, после npm run build. вы можете создать nuxtпапку в корзину s3 и загрузить все из .nuxt/dist/clientв эту папку. общедоступный путь выглядит следующим образом в файле конфигурации nuxt

        build: {
    publicPath: 'https://your-cdn-ul.net/nuxt'
  }

Но для файла PWA,manifest.json, важно, чтобы манифест обслуживался из того же домена, а не из CDN. Поэтому вам придется переопределить общедоступный путь. Дополнительную информацию можно найти здесь .

Я использую nuxt 2.15, синтаксис должен быть таким, как показано ниже. nuxt.config.js

        modules: [

    [
      '@nuxtjs/pwa',
      {
        workbox: { publicPath: '/_nuxt/' },
        manifest: { publicPath: '/_nuxt/' },
      },
    ],


  ],

Третья проблема, с которой я столкнулся, заключалась в том, что я создал файл category.json, загрузил его в корзину s3 и звонил из axios, чтобы избежать каких-либо проблем с cors, обновите настройку s3 cors следующим образом.

Вы можете найти это в ведре s3 -> Разрешения, затем -> прокрутите ниже -> () Совместное использование ресурсов между источниками (CORS)

      

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Answer 3

Если у вас есть команда, работающая над проектом, используйте Vuex. Это сохранить baseURL в самом проекте. Меньше хлопот, чтобы скопировать / поделиться переменными env с командой.