欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue @vue/cli3环境变量和模式

程序员文章站 2024-03-05 12:46:30
...

问题描述

最近在学习mockjs,想根据本地模拟的数据,直接调用ajax请求,获取相关数据,如果是发布到生产,直接更改一个配置就可以了。

问题:webpack打包是使用的nodejs环境,那么如何通过修改nodejs环境中的配置文件,影响到发布到浏览器的配置文件呢

文章参考

  1. 环境变量和模式

vue-cli3 的三种模式

development 模式

  1. vue-cli-service serve 启动
  2. 默认会去加载 .env ,.env.development, .env.development.local 配置文件
  3. 只有以 VUE_APP_ 开头的变量会被嵌入到客户端中
  4. 在vue文件中,使用 process.env 获取配置文件中的信息

production 模式

  1. vue-cli-service build 或者 vue-cli-service test:e2e 启动
  2. 默认会去加载 .env , .env.production, .env.production.local配置文件
  3. 只有以 VUE_APP_ 开头的变量会被嵌入到客户端中
  4. 在vue文件中,使用 process.env 获取配置文件中的信息

test 模式

  1. vue-cli-service test:unit 启动
  2. 默认会去加载 .env ,.env.test, .env.test.local 配置文件
  3. 只有以 VUE_APP_ 开头的变量会被嵌入到客户端中
  4. 在vue文件中,使用 process.env 获取配置文件中的信息

总结

  1. 不管什么模式,都会去加载 .env 配置文件
  2. 模式可以自定义,使用命令 vue-cli-service build --mode staging, staging就是自定义的模式名字
  3. 配置文件则会加载 .env ,.env.staging, .env.staging.local 配置文件
  4. 只有以 VUE_APP_ 开头的变量会被嵌入到客户端中

案例描述

package.json 文件

{
	...
	"scripts": {
		"serve": "vue-cli-service serve ",
		"dev": "vue-cli-service serve --mode development",
		"build": "vue-cli-service build",
		"lint": "vue-cli-service lint"
	  },
	...
}
  1. vue-cli-service servevue-cli-service serve --mode development 的简写
  2. 会将 .env 和 .env.development 和 .env.development.local 文件中的配置添加到 process.env 对象中

.env 文件

VUE_APP_CONTEXT=ctm01pec
VUE_APP_ISMOCK =true

注意:这里true不是boolean,而是字符串

// 根据Vue的环境变量模式中获取配置信息,异步加载配置文件
if (process.env.VUE_APP_ISMOCK === "true") {
  import('../mock/mock-data.js').then(_ => {
    console.log("引入mock数据成功")
   })
}

.env.development 文件

VUE_APP_NAME=huangbiao
VUE_APP_AGE=18
VUE_APP_ADDRESS=222222
VUE_APP_ASSETS=static

main.js 启动文件

import Vue from 'vue'
import App from './App.vue'
console.log(process.env)
new Vue({
  render: h => h(App),
}).$mount('#app')

打印结果

BASE_URL: “”
NODE_ENV: “development”
VUE_APP_ADDRESS: “222222”
VUE_APP_AGE: “18”
VUE_APP_ASSETS: “static”
VUE_APP_CONTEXT: “ctm01pec”
VUE_APP_ISMOCK: “huangbiao”
VUE_APP_NAME: “huangbiao”
username: “huanghaili”

vue-cli3 是如何实现环境变量和模式关联的

VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中

最大的功臣是 webpack.DefinePlugin