nuxt.config.js 中的條件屬性

Question

我正在使用 nuxt.js開發一個網站，並且希望有條件地在nuxt.config.js 中有一個配置選項：我想在運行npm run generate （構建靜態）時更改路由器基礎

這是開發環境的完整配置文件（ 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 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)/
        })
      }
    }
  }
}

該配置適用於兩種設置（因此它可以編譯，應用程序運行正常），但我想讓它自動進行，因為當我想查看靜態版本時，我經常忘記取消對路由器設置的注釋。

我沒怎么看這個問題，只是閱讀了一些 SO 問題並在谷歌上搜索了一下（對於這樣的事情： nuxt.js -> Howto configure production/development settings or this: https://github.com/nuxt/nuxt .js/issues/2940 ）。

Answer 1

您可以使用環境變量並在配置文件中包含此環境變量的條件：

const pkg = require('./package')

let config = {
  mode: 'universal',
  head: {},
  ...
}

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

module.exports = config

然后，您需要使用以下命令行來生成靜態網站：

NODE_GENERATION_TYPE=static npm run generate

您還可以在package.json設置一個腳本以使其更漂亮：

{
  "scripts": {
    "generate:static": "NODE_GENERATION_TYPE=static dev",
    "dev": "..."
  },
  ...
}

然后你就可以使用npm run generate:static運行它

Answer 2

你也可以使用 ES6 對象傳播來做到這一點：

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,
 ...process.env.NODE_ENV !== 'development' && { router: { base: '/app/'} },

我還遇到過一個模塊只需要在生產環境中導入的情況：

// Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    (process.env.NODE_ENV !== 'development' ? 'my-module' : function() {}),
    // In case it accepts arguments
    (process.env.NODE_ENV !== 'development' ? ['@jabardigitalservice/nuxt-module-keycloak', {
       namespace: 'namespace',
       clientId: 'client',
       realm: 'realm',
       keycloakUrl: 'keycloak',
       redirectUri: 'redirectUri'
     }] : [function() {}])
...