问题描述
最近在学习mockjs，想根据本地模拟的数据，直接调用ajax请求，获取相关数据，如果是发布到生产，直接更改一个配置就可以了。
问题：webpack打包是使用的nodejs环境，那么如何通过修改nodejs环境中的配置文件，影响到发布到浏览器的配置文件呢
文章参考
环境变量和模式vue-cli3 的三种模式
development 模式 vue-cli-service serve 启动默认会去加载 .env ,.env.development, .env.development.local 配置文件只有以 VUE_APP_ 开头的变量会被嵌入到客户端中在vue文件中，使用 process.env 获取配置文件中的信息默认 process.env.NODE_ENV === 'development' production 模式 vue-cli-service build 或者 vue-cli-service test:e2e 启动默认会去加载 .env , .env.production, .env.production.local配置文件只有以 VUE_APP_ 开头的变量会被嵌入到客户端中在vue文件中，使用 process.env 获取配置文件中的信息默认 process.env.NODE_ENV === 'production' test 模式 vue-cli-service test:unit 启动默认会去加载 .env ,.env.test, .env.test.local 配置文件只有以 VUE_APP_ 开头的变量会被嵌入到客户端中在vue文件中，使用 process.env 获取配置文件中的信息 总结 不管什么模式，都会去加载 .env 配置文件模式可以自定义，使用命令 vue-cli-service build --mode staging, staging就是自定义的模式名字配置文件则会加载 .env ,.env.staging, .env.staging.local 配置文件只有以 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" },... }
js
12345678910 vue-cli-service serve 是 vue-cli-service serve --mode development 的简写会将 .env 和 .env.development 和 .env.development.local 文件中的配置添加到 process.env 对象中 .env 文件VUE_APP_CONTEXT=ctm01pec VUE_APP_ISMOCK =true
js
12注意：这里true不是boolean，而是字符串
// 根据Vue的环境变量模式中获取配置信息，异步加载配置文件 if (process.env.VUE_APP_ISMOCK === "true") { import('../mock/mock-data.js').then(_ => { console.log("引入mock数据成功") }) }
js
123456 .env.development 文件VUE_APP_NAME=huangbiao VUE_APP_AGE=18 VUE_APP_ADDRESS=222222 VUE_APP_ASSETS=static
js
1234 main.js 启动文件import Vue from 'vue' import App from './App.vue' console.log(process.env) // 根据Vue的环境变量模式中获取配置信息，异步加载配置文件 // process.env.VUE_APP_MOCK 获取到的不是boolean，而是字符串 if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK !== 'false') { import('./data/mockeData').then(_ => { console.log('引入mock数据成功') }) } new Vue({ render: h => h(App), }).$mount('#app')
js
12345678910111213141516 打印结果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请参考 webpack.DefinePlugin插件学习
