Vue进阶(环境变量 和 模式切换)(npm run dev与npm run serve的区别)
程序员文章站
2022-05-13 17:19:14
...
目录
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中环境变量的调用
环境变量的使用场景:获取后端数据接口返回的图片地址数据时往往不会带有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>
上一篇: npm run serve 报错
下一篇: Java 棋盘覆盖