关键词：
【中文标题】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() ])
...
【讨论】：
如何将 nuxt.config.js 中的 .env 值与运行时配置一起使用
】如何将nuxt.config.js中的.env值与运行时配置一起使用【英文标题】：Howtouse.envvalueinnuxt.config.jswithruntimeconfig【发布时间】：2021-11-0219:47:34【问题描述】：我正在搜索。声明它，在“正常”代码中使用它是可以的。publicRuntimeConfig:UR... 查看详情
如何访问 Nuxt 插件中的 .env 变量？
...uxt.js项目中，我创建了一个名为segment.js的插件，我在nuxt.config.js中注册了它：nuxt.config.jsplugins:[src:"~ 查看详情
我可以在 nuxt.config.js 中访问 nuxt 上下文吗？
】我可以在nuxt.config.js中访问nuxt上下文吗？【英文标题】：CanIaccessnuxtcontextinnuxt.config.js?【发布时间】：2020-07-1204:42:21【问题描述】：我正在使用nuxt-i18n和@nuxtjs/auth，我想像这样配置auth.redirect选项来支持i18n：//nuxt.config.jsexportdefa... 查看详情
如何在 Nuxt 的 nuxt.config.js 中导入 mdi 图标模块
】如何在Nuxt的nuxt.config.js中导入mdi图标模块【英文标题】：Howtoimportthemdiiconsmoduleinsidenuxt.config.jsinNuxt【发布时间】：2021-01-2004:20:51【问题描述】：我已经安装了https://materialdesignicons.com/npminstall@mdi/font在nuxt.config.js文件中，我不知... 查看详情
在本地 https 上运行 nuxt – nuxt.config.js 的问题
】在本地https上运行nuxt–nuxt.config.js的问题【英文标题】：Runnuxtonhttpslocally–problemwithnuxt.config.js【发布时间】：2019-06-1316:01:18【问题描述】：我正在尝试使用https在本地运行nuxt来测试一些地理定位的东西。(https://nuxtjs.org/,https://n... 查看详情
使用 jest 测试 nuxt.js 应用程序时访问 `process.env` 属性
...t.js应用程序编写单元测试。但是我的一些组件使用在nuxt.config.js文件中声明的process.env属性。当我运行我的测试时，我收到了 查看详情
nuxt.config.js 在哪里构建模块仅在开发模式下构建？
】nuxt.config.js在哪里构建模块仅在开发模式下构建？【英文标题】：nuxt.config.jswherebuildmodulesbuildonlyindevmode?【发布时间】：2021-03-1700:36:33【问题描述】：源码：github.com/alexpilugin/ap-nuxt-firebase-s-s-r接下来是问题：此Nuxts-s-r应用程序... 查看详情
在 nuxt.config.js 中使用环境变量
】在nuxt.config.js中使用环境变量【英文标题】：UsingEnvironmentVariablesinnuxt.config.js【发布时间】：2020-05-1508:12:04【问题描述】：我正在使用Nuxt和Axios，但在从我的本地计算机构建应用程序时使用环境变量时遇到问题。我已安装@nuxtjs/... 查看详情
Nuxt.config.js noscript innerHtml 在浏览器上呈现
】Nuxt.config.jsnoscriptinnerHtml在浏览器上呈现【英文标题】：Nuxt.config.jsnoscriptinnerHtmlrenderingasitonbrowser【发布时间】：2020-09-2710:10:24【问题描述】：IhavedisabledjavascriptfrombrowserAddedinnerhtmlfornoscripttaginnuxt.config.jsExpectedbeh 查看详情
nuxt.js设置代理接口
...auseen/nuxt-proxy包依赖cnpminstall@gauseen/nuxt-proxy--save2.设置nuxt.config.js修改modules为modules:["@gauseen/nuxt-proxy"]3.增加proxyTable属性proxyTable:"/api":target:'https://xxxxx.com',changeOrigin:true,ws:false,pathRewrite:"^/api":"/api"... 查看详情
是否可以在 nuxt.config.js 或通过定义 sass 变量来更改主题默认文本颜色？
】是否可以在nuxt.config.js或通过定义sass变量来更改主题默认文本颜色？【英文标题】：Isitpossibletochangethemedefaulttextcolorinnuxt.config.jsorbydefiningsassvariable?【发布时间】：2020-09-2204:23:10【问题描述】：我有Nuxt/Vuetify应用程序，配置如... 查看详情
NUXT的SPA模式可以设置内容安全策略吗
...建一个站点，并且正在尝试为该站点设置CSP。我通过nuxt.config.js文件中的csp属性进行设置。我对CSP的理解是，它是由托管服务器设置的标头。我知道您可以将它们设置为HTML中的元标记，但 查看详情
使用 i18n 和 Nuxt 时设置语言属性？
...】：2018-11-1208:11:18【问题描述】：使用Nuxt，您可以在nuxt.config.js文件中设置语言HTML属性，如下所示：module.exports=head:htmlAttrs:lang:\'en-GB\',,...etcetc但是，如果您有一个多语言应用 查看详情
Nuxt 中的 Tailwind PostCss 配置
】Nuxt中的TailwindPostCss配置【英文标题】：TailwindPostCssConfiginNuxt【发布时间】：2021-04-0709:50:11【问题描述】：错误信息“请在您的nuxt.config.js中使用build.postcss而不是外部配置文件。对此类文件的支持将在Nuxt3中删除，因为它们删除... 查看详情
如何使用nuxt js将字体嵌入到所有页面
...18-12-2809:36:02【问题描述】：我只是将google字体嵌入到nuxt.config.js中的全局设置中link:[rel:\'stylesheet\',href:\'https://fonts.googleapis.com/css?family=Roboto\']但是如何将这种字体应 查看详情
如何在 nuxt.js 中挑选 bootstrap-vue.js 模块？
...】：我无法理解如何在nuxt.js中挑选bootstrap-vue.js模块nuxt.config.js中的以下代码正在拉取整个库（不包括css），但如上所述如何包含所需的模块。modules:[[\' 查看详情
如何将第 3 方脚本代码添加到 Nuxt？
...描述】：我正在尝试将SegmentAnalytics提供的sn-p添加到nuxt.config.js，但出现以下错误：FATAL$config未定义我做错了什么？nuxt.config.js:head:script:[hid:\'segment-script\ 查看详情
nuxt 插件文件夹中的 Javascript - 如何在组件中使用？
...javascript变量(vartestButton)。然后我将该文件添加到我的nuxt.config.js插件中。在我的组件中，我有一个Buefy按钮，我正在尝试调用 查看详情