when developing a website using nuxt.js, and would like to have a configuration option in nuxt.config.js conditionally: I would like to change the router base when I run npm run generate (building static)

Here is the full config file for development environment (npm run dev):

const pkg = require(‘./package’)

module.exports = {
mode: ‘universal’,

// if I uncomment the following three lines, the config is OK for npm run generate.
// router: {
// base: ‘/app/‘
// },

/*
** Headers of the page
*/
head: {
title: pkg.name,
meta: [
{ charset: ‘utf-8’ },
{ name: ‘viewport’, content: ‘width=device-width, initial-scale=1’ },
{ hid: ‘description’, name: ‘description’, content: pkg.description }
],
link: [
{ rel: ‘icon’, type: ‘image/x-icon’, href: ‘/favicon.ico’ },
{ rel: ‘stylesheet’, href: ‘https://fonts.googleapis.com/css?family=Montserrat:400,500,600&subset=latin-ext' }
]
},

/*
** Customize the progress-bar color
*/
loading: { color: ‘#fff’ },

/*
** Global CSS
*/
css: [
‘@/assets/css/main.scss’,
],

/*
** Plugins to load before mounting the App
*/
plugins: [
],

/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
‘@nuxtjs/axios’,
// Doc: https://bootstrap-vue.js.org/docs/
‘bootstrap-vue/nuxt’,
// Doc: https://github.com/vanhoofmaarten/nuxt-mq
[
‘nuxt-mq’,
{
// Default breakpoint for SSR
// Breakpoints are bootstrap-vue.js Breakpoints
// Doc: https://bootstrap-vue.js.org/docs/components/layout
defaultBreakpoint: ‘default’,
breakpoints: {
xs: 576, // 576 not included
sm: 768, // 768 not included
md: 992, // 992 not included
lg: 1200, // 1200 not included
xl: Infinity
}
}
]
],
bootstrapVue: {
bootstrapCSS: false, // or `css`
bootstrapVueCSS: false // or `bvCSS`
},
/*
** Axios module configuration
*/
axios: {
// See https://github.com/nuxt-community/axios-module#options
},

serverMiddleware: [
‘~/api/contact’
],

/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: ‘pre’,
test: /\.(js|vue)$/,
loader: ‘eslint-loader’,
exclude: /(node_modules)/
})
}
}
}
}

The config works fine for both settings (so it compiles, the app is running correctly), but I would like to make it automatic, as I often forget to uncomment the router settings when to see the static version.

I haven’t looked in the problem much, just read some SO questions and Googled a bit (for things like this: nuxt.js -> Howto configure production/development settings or this: https://github.com/nuxt/nuxt.js/issues/2940).

Solution :

You could use an environment variable and include a condition on this environment variable in the config file:

const pkg = require(‘./package’)

let config = {
mode: ‘universal’,
head: {},
…
}

if (process.env.NODE_GENERATION_TYPE === ‘static’) {
config.router = {
base: ‘/app/‘
}
}

module.exports = config

You would then need to use the following command line to generate the static website:

NODE_GENERATION_TYPE=static npm run generate

And you could also set up a script into package.json to make it prettier:

{
“scripts”: {
“generate:static”: “NODE_GENERATION_TYPE=static dev”,
“dev”: “…”
},
…
}

You would then be able to run it using npm run generate:static