Question

我正在使用Nuxt JS 2.4.5，并且正在以SPA模式构建静态网站，其中运行npm run build && npm run generate会在dist/目录中生成我的网站。

我试图弄清楚如何在if () {} else {}或mounted()中执行created()语句，以检查我是以开发人员模式还是生产/生成方式运行项目网站模式，以便我可以包含Google Analytics（分析）摘要，或根据模式有条件地在页面上呈现其他内容。

我仔细阅读了文档，发现了以下内容：https://nuxtjs.org/api/configuration-dev似乎对我有帮助，但由于不确定最佳效果，因此尚未付诸实践方法，正在寻找指导或示例。

我可能正在考虑尝试以下方法：

布局/default.vue

...
mounted () {
  if (process.env.NODE_ENV == 'production') {
    // run code on generated static site, e.g: Google Analytics
  } else {
    // run code if in dev mode, e.g: http://localhost:3000/
  }
}
...

...然后在我的package.json文件中，可能需要在 generate 命令上设置生产模式，该命令使用以下内容来构建网站：NODE_ENV=production

package.json

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "NODE_ENV=production nuxt generate"
  }

如果我随后运行npm run build && npm run generate，则它应该构建我的静态网站，然后Google Analytics（分析）代码才能工作。

我很想知道其他人是如何做到的以及他们的解决方案，我正在尝试让Google Analytics（分析）适用于每个页面，因此layouts目录似乎是放置代码的好地方。

Answer 1

我可以在created()的{{1}}或beforeCreate()钩子中进行设置。没有严格的规则可以像这样设置它。

如果您不使用Nuxt而是使用Vanilla Vue进行此操作，则将其放在初始化Vue的default.vue文件中。

如何在created（）或Mounted（）中有条件地呈现JS

1 个答案: