in a nuxtjs spa, how to link the assets with relative urls?

Question

When a nuxtjs app in spa mode is built, the assets are referenced at /_nuxt/vendor.a0f2fda15695e202a186.js in index.html.

Is it possible to reference to those files with a relative url (without the first slash)?

(something like <script type="text/javascript" src="_nuxt/vendor.a0f2fda15695e202a186.js"></script>)

Answer 1

1. Is it possible to reference to those files with a relative url?

Probably not.

See https://github.com/nuxt/nuxt.js/issues/1380

2. The real problem

The reason you want a "relative path" to your assets is because your SPA (or your assets) are not at the root directory of your domain. For example:

Your SPA is NOT at https://my-domain.com/

But at https://my-domain.com/my-app/

3. The solution

Go to nuxt.config.js and edit the following properties.

build: {
    // Set the absolute path where the assets are.
    // https://nuxtjs.org/api/configuration-build#publicpath
    publicPath: 'https://my-domain.com/my-app/',
},

router: {
    // Set the "Base" of the router.
    // https://router.vuejs.org/en/api/options.html#base
    base: '/my-app/'
},

link: [
    // Do this if you have files that are located at /static/
    // https://nuxtjs.org/guide/assets#static
    {
        rel: 'stylesheet',
        type: 'text/css',
        href: '/my-app/myStyleSheet.css'
    }
]

4. Reference

• https://nuxtjs.org/api/configuration-build#publicpath
• https://router.vuejs.org/en/api/options.html#base
• https://nuxtjs.org/guide/assets#static