首页 >> js开发 >> jsvue cli4下环境变量和模式示例详解js大全
jsvue cli4下环境变量和模式示例详解js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文介绍了vue cli4下环境变量和模式示例详解，分享给大家，具体如下：官方文档 官方文档 环境变量
环境变量环境变量一个环境变量文件只包含环境变量的键值对：
NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/
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
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
development 模式用于 vue-cli-service serveproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2etest 模式用于 vue-cli-service test:unit注意点：
一个模式可以包含多个环境变量
每个模式都会将环境变量中 NODE_ENV 的值设置为模式的名称
可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量
为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写
一个模式可以包含多个环境变量每个模式都会将环境变量中 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
.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/
NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/创建production模式的环境变量文件，项目根目录下新建.env.production文件
NODE_ENV=production
VUE_APP_BASE_URL=/
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')
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)
console.log(process.env.NODE_ENV)
console.log(process.env.VUE_APP_BASE_URL)
console.log(this.$http.defaults.baseURL)运行项目
npm run serve
npm run serve例子：自定义模式
例子：自定义模式例子：自定义模式自定义一个fat模式自定义一个fat模式在项目根目录下新建环境变量文件.env.fat
NODE_ENV=fat
VUE_APP_BASE_URL=http://fat.com/
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"
}
}
{
"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
npm run fat这时候项目中读取的，就是fat模式下的环境变量了
环境变量环境变量一个环境变量文件只包含环境变量的键值对：
NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/
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
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
development 模式用于 vue-cli-service serveproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2etest 模式用于 vue-cli-service test:unit注意点：
一个模式可以包含多个环境变量
每个模式都会将环境变量中 NODE_ENV 的值设置为模式的名称
可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量
为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写
一个模式可以包含多个环境变量每个模式都会将环境变量中 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
.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/
NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/创建production模式的环境变量文件，项目根目录下新建.env.production文件
NODE_ENV=production
VUE_APP_BASE_URL=/
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')
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)
console.log(process.env.NODE_ENV)
console.log(process.env.VUE_APP_BASE_URL)
console.log(this.$http.defaults.baseURL)运行项目
npm run serve
npm run serve例子：自定义模式
例子：自定义模式例子：自定义模式自定义一个fat模式自定义一个fat模式在项目根目录下新建环境变量文件.env.fat
NODE_ENV=fat
VUE_APP_BASE_URL=http://fat.com/
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"
}
}
{
"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
npm run fat这时候项目中读取的，就是fat模式下的环境变量了
相关文章:
- jsVue 解决父组件跳转子路由后当前导航active样式消失问题js大全
- JavaScriptvuejs element table 表格添加行,修改,单独删除行,批量删除行操作
- jsvue-router之解决addRoutes使用遇到的坑js大全
- js代码JavaScript undefined及null区别实例解析
- js解决vue+router路由跳转不起作用的一项原因js大全
- js解决echarts数据二次渲染不成功的问题js大全
- jsvue通过过滤器实现数据格式化js大全
- js解决vue项目router切换太慢问题js大全
- jsjquery实现简单拖拽效果js大全
- js微信小程序实现时间戳格式转换js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
