vue知识点之“vue-cli”下 .env，.env.development，.env.production，.env.test 环境配置

由于我们的项目需要在不同环境下进行运行(开发，生产，测试等)，这避免我们需要多次的去切换请求的地址以及相关的配置，vue-cli2是可以直接在config文件中进行配置的，但是vue-cli4和vue-cli3已经简化了，没有config文件怎么办？

一、建立.env系列文件

首先我们在根目录新建3个文件，分别为.env, .env.development，.env.production，.env.test

• .env 全局默认配置文件，不论什么环境都会加载合并
• .env.development 开发环境下的配置文件
• .env.production 生产环境下的配置文件
• .env.test 测试环境下的配置文件

🔊 注意:

1. 文件是只有后缀的。文件名是" .env " 不是 "env" 或者 "xxx.env"。

2. 文件名，不要修改。文件名就叫".env", ".env.development", ".env.production", ".env.test" ，约定好的，别乱改名字。

二、修改文件

分别在文件内写上：

⏰ 1. 开发环境

//.env.development 
VUE_APP_BASE_API = '需要请求API'

⏰ 2. 线上环境

//.env.production
VUE_APP_BASE_API = '需要请求API'

⏰ 3. 测试环境

//.env.test
VUE_APP_BASE_API = '需要请求API'

三、更改package.json文件

 "scripts": {
    "dev": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

四、使用

🔊 当需要用到该变量是可以用process.env.VUE_APP_BASE_API进行取值。

例如： 在js文件中直接使用

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 10000,
})

⏰ 1.Vue2.0页面写法

• 通过data定义

  <template>
      <div>
          <a :href="this.uploadUrl">点击</a>
      </div>
  </template>
  
  <script>
      export default {
      　　data() {
          　　return {
              　　uploadUrl: process.env.VUE_APP_BASE_API,
          　　}
      　　}
      }
  </script>
  
  <style scoped>
  </style>

• 使用computed()

  <template>
      <div>
          <a :href="VUE_APP_BASE_API">点击</a>
      </div>
  </template>
  
  <script>
  export default {
      computed: {
          VUE_APP_BASE_API(){
              return process.env.VUE_APP_BASE_API
          }
      }
  }
  </script>
  
  <style scoped>
  </style>

⏰ 2.Vue3.0页面写法

Vue3.0使用setup()的一个写法

<template>
    <div>
        <a :href="uploadUrl">点击</a>
    </div>
</template>

<script>
export default {
    setup() {
        return {
            uploadUrl:'process.env.VUE_APP_BASE_API'
        }
    }
}
</script>

<style scoped>
</style>