vue cli上如何快速切换开发/测试/投产环境的配置文件!
-
vue-cli-plugin-app-config
介绍
一个vue项目配置文件管理的解决方案,可方便开发者在本地环境/测试环境/投产环境等多种配置里面快速切换
快速使用
添加插件
yarn add vue-cli-plugin-app-config // 或者 npm i vue-cli-plugin-app-config --save-dev
应用插件到项目中
vue add vue-cli-plugin-app-config
配置插件 vue.config.js
module.exports = { ...other config pluginOptions: { // options 'app-config': { file: './app.config.js', default: 'dev' } } }
插件配置项 options
配置项 默认值 描述 file ./app.config.js 配置文件路径,默认为项目根目录,和 vue.config.js 同级 default dev 默认使用的配置环境 app.config.js 配置文件结构示例
module.exports = { // 不同环境环境配置 env: { // 开发环境 dev: { apihost: 'http://local.api.com' }, // 测试环境 test: { apihost: 'http://test.api.com' }, // 投产环境 prod: { apihost: 'http://bbs.api.com' }, ... }, // 公用配置 common: { // 接口超时时间 timeout: 5000, // 主题配置 theme: 'red', ... } }
使用不同的环境启动项目(以yarn为例)
开发环境
// 默认 dev环境,所以可加可不加 yarn serve --dev
测试环境
yarn serve --test
正式环境
yarn serve --prod
用户自定义环境
yarn serve --xxx
使用不同的环境编译项目(以yarn为例)
开发环境
// 默认 dev环境,所以可加可不加 yarn build --dev
测试环境
yarn build --test
正式环境
yarn build --prod
用户自定义环境
yarn build --xxx
项目中使用配置内容
使用本插件以后,会在项目全局生成一个
$config
对象,可在任意js文件中通过$config
直接获取配置内容上文中的配置文件,以dev环境启动为例,最终得到的 $config 文件如下
// $config { apihost: 'http://local.api.com', // 接口超时时间 timeout: 5000, // 主题配置 theme: 'red' }
示例
<template lang="html"> <div> apihost: {{config.apihost}} </div> </template> <script> export default { data() { return { // 注入到当前组件 config: $config } }, mounted() { console.log('全局项目配置', $config) } } </script> <style lang="css" scoped> </style>
注意事项
插件注入的$config,在开启eslint强校验的环境,会报错,需要配置一下eslint规则
修改 app.config.js 以后需要重启项目,变量才能生效配置项目根目录中的 .eslintrc.js (如果没有此文件,可新建一个)
module.exports = { globals: { $config: true }, ... }
西南地区IT社群(QQ)
- 云南
- 【昆明网页设计交流吧】243627302
- 【昆明nodejs交流吧】 243626749
- 【VUE】838405306
- 【云南程序员总群】343606807
- 【昆明UI设计】104031254
- 【云南软件外包】15547313
- 贵州
- 【PHP/java源码/站长交流群】55692114
- 四川
- 【成都Java/JavaWeb交流】86669225
- 【vaScript+PHP+MySql】116270060
- 【UI设计/设计交流学习群】135794928
- 重庆
- 【诺基亚 JAVA游戏博物馆】 559479780
- 【PHP,Java,Python,C++接单】 442103442
- 西藏