您当前的位置:首页 > 资源分享 > 前端技术 前端技术

【vue】变量与模式,开发生产环境设置不同的参数配置

caster2019-07-16 21:41:39 前端技术 人已围观

简介项目开发过程中不同环境会用到不同的变量配置,因此需要配置一下开发环境测试环境以及生产环境的环境变量。

项目开发过程中不同环境会用到不同的变量配置,因此需要配置一下开发环境测试环境以及生产环境的环境变量。

官方vue cli环境变量和模式:

https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

环境变量与模式

.env                #在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

一个环境文件只包含环境变量的“键=值”对:

FOO=bar
VUE_APP_SECRET=secret

模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:

  • development 模式用于 vue-cli-service serve
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  • test 模式用于 vue-cli-service test:unit

.env 默认文件配置:


# 所有环境默认

#api 地址
VUE_APP_API=默认的api地址

#title前缀
VUE_APP_TITLE=凌凯

#cdn地址
VUE_APP_CDN=https://www.eotodo.com

.env.production 生产环境配置

# 生产环境

#api 地址
VUE_APP_API=生产环境的api地址

#开发环境的参数A
VUE_APP_A=生产环境的参数A

.env.development开发环境配置

# 开发环境

#api 地址
VUE_APP_API=开发环境的api地址

#开发环境的参数A
VUE_APP_A=开发环境的参数A

view视图中调用

<template>
  <div>
    <h1>{{title}}---webpackdemo测试</h1>
    {{cdn}}
    <br />
    {{api}}
    <br />
    {{a}}
    <br />
  </div>
</template>
<script>
export default {
  data() {
    return {
        title:process.env.VUE_APP_TITLE,
      cdn: process.env.VUE_APP_CDN,
      api: process.env.VUE_APP_API,
      a: process.env.VUE_APP_A
    };
  },

  methods: {},

  computed: {},

  created() {},

  mounted() {
    console.log(process.env.VUE_APP_CDN);
    console.log(process.env.VUE_APP_API);
    console.log(process.env.VUE_APP_A);
  }
};
</script>
<style scoped>
</style>


视图如下





---end---


 

文章评论

打赏

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~