javascript - How to serve cdn links for assets in NuxtJS? - Stack Overflow

admin管理员组

文章数量:1026156

I am working on a NUXTJs to create server side rendered website. My question is that although there is a assets/static folder in nuxt project structure to serve images & static files, i want to set cdn link for all my image source. What would be the best approach to do that?

Possible ways I can think of:

1. Vuex Store - set baseURL for the images and then use in ponents
2. env - use environment variable to set the cdn URL

TIA

I am working on a NUXTJs to create server side rendered website. My question is that although there is a assets/static folder in nuxt project structure to serve images & static files, i want to set cdn link for all my image source. What would be the best approach to do that?

Possible ways I can think of:

1. Vuex Store - set baseURL for the images and then use in ponents
2. env - use environment variable to set the cdn URL

TIA

• javascript
• vue.js
• vuejs2
• nuxt.js

Share Improve this question Follow asked Oct 28, 2018 at 18:07 user10090131user10090131 1

• Please, provide an example of links that you use inside application and an example URL of that image from CDN. And are those links are hardcoded inside the app (templates, store, data?) or ing from an API? – aBiscuit Commented Oct 28, 2018 at 18:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can set it via publicPath property in nuxt.config

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

https://nuxtjs/api/configuration-build/#publicpath

If you have a team working on the project, use Vuex. It save the baseURL in the project itself. Less hassle to copy/share the env variables to the team.

Alright after spending a couple of hrs, As answered above you can set cdn url to nuxt.config.js file. If you are someone like me who is using CloudFront / S3 bucket, After npm run build. you can create nuxt folder to your s3 bucket and upload everything from .nuxt/dist/client to this folder. the public path looks as follows in nuxt config file

  build: {
    publicPath: 'https://your-cdn-url/nuxt'
  }

But for PWA,manifest.json file it is important that the manifest is served from the same domain, and not from the CDN.so you'll have to override the public path.you can find more info here

I'm using nuxt 2.15,syntax has to be exactly like as follows. nuxt.config.js

  modules: [

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


  ],

3rd issue that I faced was, I've created categories.json file and uploaded to s3 bucket and was calling from axios, to avoid any cors issue update s3 cors setting as follows

You can find this in s3 bucket -> Permissions then -> scroll below -> () Cross-origin resource sharing (CORS)

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

I am working on a NUXTJs to create server side rendered website. My question is that although there is a assets/static folder in nuxt project structure to serve images & static files, i want to set cdn link for all my image source. What would be the best approach to do that?

Possible ways I can think of:

1. Vuex Store - set baseURL for the images and then use in ponents
2. env - use environment variable to set the cdn URL

TIA

I am working on a NUXTJs to create server side rendered website. My question is that although there is a assets/static folder in nuxt project structure to serve images & static files, i want to set cdn link for all my image source. What would be the best approach to do that?

Possible ways I can think of:

1. Vuex Store - set baseURL for the images and then use in ponents
2. env - use environment variable to set the cdn URL

TIA

• javascript
• vue.js
• vuejs2
• nuxt.js

Share Improve this question Follow asked Oct 28, 2018 at 18:07 user10090131user10090131 1

• Please, provide an example of links that you use inside application and an example URL of that image from CDN. And are those links are hardcoded inside the app (templates, store, data?) or ing from an API? – aBiscuit Commented Oct 28, 2018 at 18:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can set it via publicPath property in nuxt.config

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

https://nuxtjs/api/configuration-build/#publicpath

If you have a team working on the project, use Vuex. It save the baseURL in the project itself. Less hassle to copy/share the env variables to the team.

Alright after spending a couple of hrs, As answered above you can set cdn url to nuxt.config.js file. If you are someone like me who is using CloudFront / S3 bucket, After npm run build. you can create nuxt folder to your s3 bucket and upload everything from .nuxt/dist/client to this folder. the public path looks as follows in nuxt config file

  build: {
    publicPath: 'https://your-cdn-url/nuxt'
  }

But for PWA,manifest.json file it is important that the manifest is served from the same domain, and not from the CDN.so you'll have to override the public path.you can find more info here

I'm using nuxt 2.15,syntax has to be exactly like as follows. nuxt.config.js

  modules: [

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


  ],

3rd issue that I faced was, I've created categories.json file and uploaded to s3 bucket and was calling from axios, to avoid any cors issue update s3 cors setting as follows

You can find this in s3 bucket -> Permissions then -> scroll below -> () Cross-origin resource sharing (CORS)

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

本文标签： javascriptHow to serve cdn links for assets in NuxtJSStack Overflow