vue cli4下环境变量和模式示例详解


Posted in Javascript onApril 09, 2020

本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下:

官方文档

环境变量

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

NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/

注意:

  • NODE_ENV - 是 “development”、“production” 、"test"或者自定义的值。具体的值取决于应用运行的模式
  • BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的基础路径
  • 除了 NODE_ENV 和 BASE_URL,其他的环境变量必须以 VUE_APP_ 开头
  • 项目中使用:process.env.环境变量名,eg:VUE_APP_BASE_URL

模式

模式是 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

注意点:

  • 一个模式可以包含多个环境变量
  • 每个模式都会将环境变量中 NODE_ENV 的值设置为模式的名称
  • 可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量
  • 为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级
  • 此外,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被 .env 文件覆写
.env        # 在所有的环境中被载入
.env.local     # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]     # 只在指定的模式中被载入,优先级高于.env和.env.local
.env.[mode].local  # 只在指定的模式中被载入,但会被 git 忽略,优先级高于.env和.env.local

例子:不同模式下,为axios指定不同的baseUrl

创建development模式的环境变量文件,项目根目录下新建.env.development文件

NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/

创建production模式的环境变量文件,项目根目录下新建.env.production文件

NODE_ENV=production
VUE_APP_BASE_URL=/

在src目录下main.js文件中使用环境变量

import Vue from 'vue'
import App from './App.vue'

// 导入axios
import axios from 'axios'
// 设置请求根路径,使用环境变量
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// axios拦截器
axios.interceptors.request.use(config => {
 // 为请求头对象,添加Token验证的Authorization字段
 config.headers.Authorization = window.sessionStorage.getItem('token')
 // 在最后必须return config
 return config
})
// 挂载到vue
Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

也可以在其他vue组件中打印

console.log(process.env.NODE_ENV)
console.log(process.env.VUE_APP_BASE_URL)
console.log(this.$http.defaults.baseURL)

运行项目

npm run serve

例子:自定义模式

自定义一个fat模式

在项目根目录下新建环境变量文件.env.fat

NODE_ENV=fat
VUE_APP_BASE_URL=http://fat.com/

根目录下package.json中新增脚本命令

{
 "name": "vue_shop",
 "version": "0.1.0",
 "private": true,
 "scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  // 这条命令是我自定义的,通过--mode指定模式为fat
  "fat": "vue-cli-service serve --mode fat",
  "lint": "vue-cli-service lint"
 },
 "dependencies": {
  "axios": "^0.19.2",
  "core-js": "^3.4.4",
  "echarts": "^4.6.0",
  "element-ui": "^2.4.5",
  "vue": "^2.6.10",
  "vue-router": "^3.1.3"
 },
 "devDependencies": {
  "@vue/cli-plugin-babel": "^4.1.0",
  "@vue/cli-plugin-eslint": "^4.1.0",
  "@vue/cli-plugin-router": "^4.1.0",
  "@vue/cli-service": "^4.1.0",
  "@vue/eslint-config-standard": "^4.0.0",
  "babel-eslint": "^10.0.3",
  "babel-plugin-component": "^1.1.1",
  "eslint": "^5.16.0",
  "eslint-plugin-vue": "^5.0.0",
  "less": "^3.10.3",
  "less-loader": "^5.0.0",
  "vue-cli-plugin-element": "^1.0.1",
  "vue-template-compiler": "^2.6.10"
 }
}

运行命令

npm run fat

这时候项目中读取的,就是fat模式下的环境变量了

到此这篇关于vue cli4下环境变量和模式示例详解的文章就介绍到这了,更多相关vue cli4环境变量和模式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 #Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 #Javascript
加速vue组件渲染之性能优化
Apr 09 #Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 #Javascript
You might like
PHP下10件你也许并不了解的事情
2008/09/11 PHP
php array_search() 函数使用
2010/04/13 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
event.srcElement+表格应用
2006/08/29 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
详解Python发送邮件实例
2016/01/10 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
python numpy实现rolling滚动案例
2020/06/08 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
企划专员岗位职责
2013/12/09 职场文书
调解员先进事迹材料
2014/02/07 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python