vue-cli在不同环境下赋予变量不同的值

Source

最近在github上搭个人主页,因为要使用github的api,必须用到owner和repo的值。

https://api.github.com/repos/:owner/:repo/issues

在开发环境下,可以自己赋值;在生产环境下,我则希望直接通过window.location.pathname获得。


在创建vue-cli时会自动配置环境变量,生产环境是production,开发环境是development
在这里插入图片描述
然后在.js和.vue中都可以通过process.env.NODE_ENV获得环境变量的值。
因此如果要设置一个在不同环境下不同的变量,可以通过process.env.NODE_ENV作为key值。
比如:

<script>
  export default {
    name: '',
    data() {
      return {
        repo: {
          "development": "pma934.github.io",
          "production": window.location.pathname,
        }
      }
    },
    methods: {
      xxx: function () {
        console.log(this.repo[process.env.NODE_ENV])
      }
    }
  }
</script>