蝙蝠岛资源网 Design By www.hbtsch.com
本文介绍了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模式下的环境变量了
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无vue cli4下环境变量和模式示例详解的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]