Vue进阶（环境变量 和 模式切换）（npm run dev与npm run serve的区别）

目录

1、开发环境与生产环境切换

2、Vue中环境变量的调用

---

1、开发环境与生产环境切换

（1）根目录下新建 .env.dev文件和.env.prod环境变量文件如下：

.env.dev文件 (开发环境模式下使用的环境变量）

NODE_ENV = development

VUE_APP_BASE_API = http://localhost:8088/api
VUE_APP_BASE_IMG_URL = http://localhost:8088

.env.prod文件（生产环境模式下使用的环境变量）

NODE_ENV = production

VUE_APP_BASE_API = http://118.100.100.100:8088/api
VUE_APP_BASE_IMG_URL = http://118.100.100.100:8088

（2）在package.json文件配置不同模式

  "name": "home",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    //使用--mode dev来标识 当npm run serve 命令时 会自动去.env.dev文件中加载环境变量
    "serve": "vue-cli-service serve --mode  dev", 
    //使用--mode dev来标识 当npm run build命令时 会自动去.env.prod文件中加载环境变量
    "build": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

(可以创建多种环境用于不同环境的测试）

例如：创建.env.local文件 用于创建本地环境模式

.env.local文件

NODE_ENV = localhost

VUE_APP_BASE_API = http://127.0.0.1:8088/api
VUE_APP_BASE_IMG_URL = http://127.0.0.1:8088

package.json文件中

  "scripts": {
    //使用--mode dev来标识 当npm run serve 命令时 会自动去.env.dev文件中加载环境变量
    "serve": "vue-cli-service serve --mode  dev", 
    //使用--mode dev来标识 当npm run build命令时 会自动去.env.prod文件中加载环境变量
    "build": "vue-cli-service build --mode prod",
    //使用--mode local来标识 当npm run local命令时 会自动取.env.local文件中加载环境变量
    "local" : "vue-cli-service serve --mode local",
    "lint": "vue-cli-service lint"
  },

到这里应该明白npm run dev、npm run serve 、npm run build命令的区别

当使用npm run serve命令时 实际执行的是 vue-cli-service serve --mode dev这段命令

当使用npm run build命令时，实际执行的时vue-clic service build --mode prod这段命令

2、Vue中环境变量的调用（注意：环境变量的名称必须以 VUE_APP_前缀开头，否则获取不到变量值)

环境变量的使用场景：获取后端数据接口返回的图片地址数据时往往不会带有IP地址和目录地址此时需要使用环境变量来获取环境变量的值拼接图片绝对路径地址

在组件中通过 process.env.VariableName

<template>
    <div></div>
</template>

<script>
let BASE_IMG_URL = process.env.VUE_APP_BASE_IMG_URL

export default {
    name:"ComponentName"
}
</script>