如何在 nuxt 中阻止生产页面但在开发中显示？

Question

我尝试使用

.nuxtignore

执行此操作，因为使用它您可以忽略“在构建阶段”的文件。但后来我意识到该页面在开发中也不再可见。

我正在制作一个参考页面（比 .md 更复杂），供开发人员在进行组件开发时在项目中使用。但我不希望最终用户在生产时看到该页面。如何阻止该页面进入生产环境，但在 Nuxt 中的开发中显示？

Answer 1

您不能通过配置忽略，而是通过脚本检测您是否处于开发模式，然后重定向到另一个页面，如下所示：

例如。

pages/test.vue

<template>
  <div>Dev Only</div>
</template>

<script>
export default {
  asyncData({ isDev, redirect }) {
    if (!isDev) {
      redirect({ name: 'index' })
    }
  }
}
</script>

Answer 2

您可以在

ignore

中添加

nuxt.config.js

属性来忽略文件（或页面）。还可以使用

env variable

来判断是处于生产模式还是开发模式。

• Nuxt2

要在nuxt2中使用env变量，您可以安装

cross-env

软件包，并在

package.json

文件中添加一些配置。还要记住首先为不同的环境创建

.env

文件。示例代码如下：

// nuxt.config.js

  export default {
     // ...
     ignore: [
        process.env.ENVIROMENT === 'production' ? 'pages/debug/*' : '',
        process.env.ENVIROMENT === 'production' ? 'pages/someOtherPage.vue' : '',
     ],
  }
  

// .env.local

  ENVIROMENT = local

// package.json

  {
    // ...
    "scripts": {
      "local": "cross-env ENV=local nuxt",
      "generate": "cross-env ENV=prod nuxt generate"
    },
    "dependencies": {
      "corss-env": "7.0.3"
    }
    // ...
  }

• Nuxt3

在nuxt3中

dotenv

是一个内置包，你只需要添加一些配置即可。请记住在您的

VITE

文件中添加

.env.xxx

前缀。示例代码如下：

 // nuxt.config.ts

  export default defineNuxtConfig({
    // ...
    ignore: [
        process.env.VITE_ENVIROMENT == "production" ? 'pages/poc/carousel.vue' : ''
    ]
  })

  // env.local

  VITE_ENVIROMENT = production

  // package.json

  {
    // ...
    "scripts": {
      "local": "nuxt dev --dotenv .env.local",
      "build": "nuxt build --dotenv .env.prod"
    }
    // ...
  }