vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue cli4环境变量和模式

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

作者:大白能

这篇文章主要介绍了vue cli4环境变量和模式示例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

官方文档

环境变量

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

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

注意:

模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:

注意点:

.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环境变量和模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文