如何在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() 永远不会触发