1

我一直在寻找一种方法来访问降价文件中的环境变量。例如，如果编写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 插件研究文档时：

"@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",

文档或其支持存储库中的任何内容都没有演示如何将全局传递给降价文件。当我研究该站点和其他站点时，我没有为 Vue 找到任何结果，但我确实为 Hugo 找到了一些东西：“在 Markdown 文件中使用环境变量”，这在 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 文件并使用？

4

0 回答 0