如何在created()或mounted()中有条件地呈现JS

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在created()或mounted()中有条件地呈现JS相关的知识,希望对你有一定的参考价值。

我正在使用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文件中,我需要在生成命令上设置生产模式,该命令使用以下命令构建网站: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(分析)适用于每个页面,因此布局目录似乎是放置代码的好地方。

答案

我会把它放在created()beforeCreate()default.vue钩子里。没有硬性和快速的规则反对像这样设置它。

如果你这样做不使用Nuxt而是使用vanilla Vue,我会把它放在初始化Vue的main.js文件中。

以上是关于如何在created()或mounted()中有条件地呈现JS的主要内容,如果未能解决你的问题,请参考以下文章

Nativescript Vue 简单示例 create()mounted() 永远不会触发

Vue在created异步请求数据,在mounted中获取不到

关于created 得到的值在mounted里获取不到

vue生命周期中created和mounted的区别

在 Vue 中created 和 mounted 的区别

vue.js中mounted和created的区别