Vue：如何在markdown文件中引用环境变量？ 尝试：

编程问答 2022-06-06

问题描述

我一直在寻找一种访问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 (将#修改为@）

environment-variablesgraphqlgridsomevue.js