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>

  • 6
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

进阶的疯狗der

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值