nuxt.config.js 中的条件属性

Posted 2023-02-22

【中文标题】nuxt.config.js 中的条件属性

【英文标题】：Conditional attribute in nuxt.config.js

【发布时间】：2019-08-16 15:13:30

【问题描述】：

我正在开发一个使用 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 s-s-r
        // 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)/
        )
      
    
  

该配置适用于两种设置（因此它可以编译，应用程序运行正常），但我想让它自动运行，因为我经常忘记在需要时取消注释 router 设置查看静态版本。

我没有过多地研究这个问题，只是阅读了一些 SO 问题并在 Google 上搜索了一下（对于这样的事情：nuxt.js -> Howto configure production/development settings 或这个：https://github.com/nuxt/nuxt.js/issues/2940）。

【参考方案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 运行它

【讨论】：

谢谢，您的回答有效:) 我真的希望对于比我更熟悉该主题的人来说这有点容易。我所做的唯一修改是将 "generate:static": "NODE_GENERATION_TYPE=static nuxt generate" 放在 package.json 中，但这并没有真正改变任何东西

【参考方案2】：

你也可以使用 ES6 对象传播：

export default 
  // Disable server-side rendering: https://go.nuxtjs.dev/s-s-r-mode
  s-s-r: 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() ])
...