publicPath for static payload

[jonathanwilke]

Hi everyone,

I need to be able to set a URL that is being prefixed on the payload of statically generated pages. I discovered the publicPath property in the build config, which does prefix the app.js and the runtime.js, etc. correctly but doesn't prefix any file in the /static folder which contains the payloads for the pages. Is this a bug or is there some way to do this, that I haven't figured out yet?

I'm not sure if the discussions section is the right place for this or if I should create an issue for that. Please let me know if I have to move it to the issues.

[pi0]

Hi @jonathanwilke. You can use router.base which sets all baseURLs.

[jonathanwilke]

So here is my nuxt.config.ts. I have to mention that we embedding this application on another page as a micro frontend.

Note that the process.env.URL is set by Netlify as the domain of the deployment.

import { Configuration } from '@nuxt/types';
import { getTenantConfig } from './config/tenant-config';

const config: Configuration = {
  mode: 'universal',
  target: 'static',
  env: {
    apiUrl: process.env.API_URL || 'https://...',
    imagekitEndpointUrl: process.env.IMAGEKIT_ENDPOINT_URL || 'https://ik.imagekit.io/...',
    tenantAcronym: process.env.TENANT_ACRONYM || 'gc'
  },
  head: {},
  loading: { color: getTenantConfig(process.env.TENANT_ACRONYM).styles.colors.primary },
  css: ['~/assets/main.scss'],
  components: true,
  plugins: [],
  buildModules: [['@nuxt/typescript-build', { typeCheck: false }], 'nuxt-composition-api', '@nuxtjs/vuetify'],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/dotenv',
    '@nuxtjs/apollo',
    [
      'nuxt-fontawesome',
      {
        imports: [
          {
            set: '@fortawesome/pro-solid-svg-icons',
            icons: [ ... ]
          }
        ]
      }
    ]
  ],
  apollo: {
    clientConfigs: {
      default: '@/config/apollo-config.js'
    }
  },
  typescript: {
    typeCheck: {
      eslint: true
    }
  },
  vuetify: {
    treeShake: true,
    customVariables: [`~/assets/tenant-styles/${process.env.TENANT_ACRONYM || 'gc'}.scss`],
    optionsPath: '@@/config/vuetify-config.ts',
    defaultAssets: false,
    css: true
  },
  router: {
    mode: 'hash',
    base: process.env.URL || '/'
  },
  build: {
    publicPath: process.env.URL,
    splitChunks: {
      pages: false
    },
    extend() {},
    postcss: {
      plugins: {
        'postcss-prefix-selector': {
          prefix: '#gc-vehicle-db',
          exclude: [new RegExp('\\.nuxt.*')],
          transform(prefix: string, selector: string, prefixedSelector: string) {
            if (selector === 'body') {
              return prefix;
            } else if (selector === 'html') {
              return prefix;
            } else {
              return prefixedSelector;
            }
          }
        }
      }
    }
  }
};

export default config;

[kreig303]

Are you using a custom config for setting path to payloads? Normally it should be {router.base}/_nuxt/static/version/{path}/payload.js

Sharing nuxt.config would be appreciated.

Hello @pi0

We have encountered an issue with the script for payload.js whilst using custom routes and setting the router.base with a directory. It seems like you might be saying there was an issue in that case? please advise if you could and we'll provide sample nuxt config if desired

[SteveFromAccounting]

As some additional context for @kreig303 's comment, I've set router.base to a value that's set via env vars during generate, like so:

$ CUSTOM_BASE=testbase nuxt generate

/* nuxt.config.js */

// ...
  router: {
    base: `/${process.env.CUSTOM_BASE}`,
// ...
   generate: {
      cache: false,
      crawler: false,
      dir: `dist/${process.env.CUSTOM_BASE}`,
      fallback: false,
// ...

This outputs the expected static files in dist/testbase. The structure of dist/testbase/ is:

_nuxt
    |_ fonts
    |_ img
    |_ pages
    |_ static
        |_ 1604831212
            |_ testbase
                |_ my-sample-page-1
                    |_ payload.js # page payload 
                payload.js # root payload
testbase 
    |_ my-sample-page-1
        |_ index.html
# And then all the other expected files like /static-assets, favicon.ico, the root index.html, etc

The problem here is that for the "testbase/my-sample-page-1/index.html", it's correctly/expectedly referencing the payload.js with:

<link rel="preload" href="/testbase/_nuxt/static/1604831212/testbase/my-sample-page-1/payload.js" as="script">

However, once I load the page and it finishes loading, I see a second call to a payload.js without testbase in the path:

https://www.example.com/testbase/_nuxt/static/1604831212/my-sample-page-1/payload.js

[SteveFromAccounting]

@pi0 Unsure if I'm the wrong track here, but I'm thinking the problem may be with fetchPayload() here: https://github.com/nuxt/nuxt.js/blob/819afcdeb447b73b675cfc654f641fc2df5894f9/packages/vue-app/template/App.js#L309

The execution of urlJoin() here (for me) would look like:

const base = "/testbase"
const staticAssetsBase = "/_nuxt/static/1604948861"
const route = "/my-sample-page-1"

const src = urlJoin(base, staticAssetsBase, route, "payload.js" ) 
// src = "/testbase/_nuxt/static/1604948861/my-sample-page-1/payload.js"

One fix seems to be to just add base in as the 3rd param.

[pi0]

see v2.14.8