如何解决Vue:如何在markdown文件中引用环境变量? 尝试:
我一直在寻找一种访问Markdown文件中的环境变量的方法。如果编写 foo.md :
的示例Bacon ipsum dolor amet turkey ham drumstick,[landjaeger]({{ process.env.GRIDSOME_URL }}/landjaeger)
以及<iframe>
内:
<iframe height="{{ process.env.GRIDSOME_HEIGHT }}"
在我的 .env 文件中,我可以引用环境变量,而在其他所有文件中都没有任何问题:
.env :
GRIDSOME_URL=https://path/to/somethinng
GRIDSOME_HEIGHT=450
但是当我研究已安装的Gridsome plugins的文档时:
"@gridsome/plugin-google-analytics": "^0.1.0","@gridsome/plugin-sitemap": "^0.2.1","@gridsome/remark-prismjs": "0.0.6","@gridsome/source-filesystem": "^0.6.0","@gridsome/transformer-remark": "^0.3.4","graphql-playground-html": "^1.6.22",
文档或其支持库中的任何内容都没有演示如何将全局变量传递给markdown文件。当我研究该站点和其他站点时,找不到Vue的任何结果,但确实找到了Hugo的东西:“ Use Environment Variable in Markdown Files”,这在Gridsome中不起作用。
尝试:
foo.vue:
<template>
<Layout>
<h1>{{ $page.doc.title }}</h1>
<div class="markdown" v-html="$page.doc.content" :height="height" />
</Layout>
</template>
<page-query>
query Doc ($path: String!) {
doc: doc (path: $path) {
title
path
date (format: "MMMM D,YYYY")
timetoRead
content
}
}
</page-query>
<script>
import { LinkIcon } from 'vue-feather-icons'
export default {
components: {
LinkIcon
},data() {
return {
height: process.env.GRIDSOME_HEIGHT
}
},MetaInfo() {
return {
title: this.$page.doc.title,Meta: [
{
key: 'description',name: 'description',content: this.$page.doc.description
}
]
}
}
}
</script>
foo.md:
<iframe :height="{{ $height }}"
在Gridsome / Vuex中,如何将环境变量向下传递到Markdown文件并使用?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。