如何从Quasar Framework获取环境变量

Question

环境变量中定义config/的目录prod.env.js和dev.env.js,如何让这些变量的.vue文件吗？

我尝试使用process.env.MY_VAR假设它是nodejs内置库,它给出了一个错误:

[=======             ] 34% (building modules){ SyntaxError: Unexpected token (1:5)

.vue文件中的最小代码:

<template>
  <q-layout>
    <div class="layout-view">
          <button class="primary" @click="foo">
            <i class="on-left">lock</i> Login
          </button>
    </div>
  </q-layout>
</template>
<script>
  export default {
    data() {
      return { url: '' }
    }
    methods: {
      foo: function() {
        this.url = process.env.MY_VAR // no error if commented
      }
    }
  }
</script>

获取这些环境变量的正确方法是什么？

Answer 1

在dev.env.js和prod.env.js你写的东西:

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MY_VAR: '"something"'
})

然后,您可以process.env.MY_VAR在您的Quasar应用程序代码中使用.

注意报价+双引号.Quasar中的构建过程使用Webpack的DefinePlugin(https://webpack.js.org/plugins/define-plugin/),它需要JSON编码值.使用JSON.stringify()像JS对象更为复杂的变量.