1 Star 2 Fork 0

赵成围 / vue-cli-plugin-app-config

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
Clone or download
README.md 3.21 KB
Copy Edit Web IDE Raw Blame History
赵成围 authored 2020-05-02 11:34 . v1.0.9

中文 | English

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
  },
  ...
}

Comment ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/Ivorzk/vue-cli-plugin-app-config.git
git@gitee.com:Ivorzk/vue-cli-plugin-app-config.git
Ivorzk
vue-cli-plugin-app-config
vue-cli-plugin-app-config
master

Search