如何在 created() 或 mounted() 中有条件地渲染 JS答案

【问题标题】：How to conditionally render JS in created() or mounted()如何在 created() 或 mounted() 中有条件地渲染 JS
【发布时间】：2019-03-25 20:24:52
【问题描述】：

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

我试图弄清楚如何在mounted() 或created() 中执行if () {} else {} 语句，以检查我是在开发模式还是生产/生成的网站模式下运行我的项目，以便我可以包括 Google Analytics sn-p，或根据模式有条件地在页面上呈现其他内容。

我查看了文档并发现了以下内容：https://nuxtjs.org/api/configuration-dev 这看起来对我有一些帮助，但尚未将其付诸实践，因为我不确定最佳方法和我正在寻找指导或示例。

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

layouts/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 目录似乎是放置代码的好地方。

【问题讨论】：

标签： vue.js vuejs2 nuxt.js

【解决方案1】：

我会在default.vue 的created() 或beforeCreate() 挂钩中进行设置。没有硬性规定禁止这样设置。

如果你不是使用 Nuxt 而是使用原生 Vue，我会将它放在初始化 Vue 的 main.js 文件中。

【讨论】：