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
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README_en.md

中文 | English

vue-cli-plugin-app-config

Introduce

A vue project profile management solution that allows developers to quickly switch between local/test/production configurations

Quick to use

Add the plug-in

yarn add vue-cli-plugin-app-config

// or

npm i vue-cli-plugin-app-config --save-dev

Apply plug-ins to your project

vue add vue-cli-plugin-app-config

Configure the plug-in vue.config.js

module.exports = {
   ...other config
   pluginOptions: {
      // options
      'app-config': {
        file: './app.config.js',
        default: 'dev'
      }
   }
}

options

Configuration items The default value describe
file ./app.config.js The configuration file path, which defaults to the project root directory, is at the same level as vue.config.js
default dev The configuration environment used by default

app.config.js Sample configuration file structure

module.exports = {
  // Different environment environment configuration
  env: {
    // The development environment
    dev: {
      apihost: 'http://local.api.com'
    },
    // The test environment
    test: {
      apihost: 'http://test.api.com'
    },
    // Production environment
    prod: {
      apihost: 'http://bbs.api.com'
    },
    ...
  },
  // Common configuration
  common: {
    // Interface timeout
    timeout: 5000,
    // The topic configuration
    theme: 'red',
    ...
  }
}

Start the project with a different environment (in the case of yarn)

The development environment

// Default dev environment, so can be added or not added
yarn serve --dev

The test environment

yarn serve --test

Production environment

yarn serve --prod

User - defined environment

yarn serve --xxx

Compile the project using a different environment (in the case of yarn)

The development environment

// Default dev environment, so can be added or not added
yarn build --dev

The test environment

yarn build --test

Production environment

yarn build --prod

User - defined environment

yarn build --xxx

Use configuration content in your project

After using this plug-in, a '$config' object will be generated globally in the project, and the configuration content can be directly obtained in any js file through '$config'

For the above configuration file, take the dev environment startup as an example, and the resulting $config file is as follows

// $config
{
  apihost: 'http://local.api.com',
  // Interface timeout
  timeout: 5000,
  // The topic configuration
  theme: 'red'
}

The sample

<template lang="html">
  <div>
    apihost: {{config.apihost}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Inject into the current component
      config: $config
    }
  },
  mounted() {
    console.log('Global project configuration', $config)
  }
}
</script>

<style lang="css" scoped>
</style>

Matters needing attention

Plug-in injected $config, strong in open eslint calibration environment, complains, need to configure the eslint rules Modify the app. Config. Need to restart the project after js, variable to take effect

Configuration in the project root directory. Eslintrc. Js (if there is no this file, create a new)

module.exports = {
  globals: {
    $config: true
  },
  ...
}

Comments ( 0 )

Sign in for post a comment

About

一个vue项目配置文件管理的解决方案,可方便开发者在本地环境/测试环境/投产环境等多种配置里面快速切换 spread retract
JavaScript
MIT
Cancel

Releases

No release

Gitee Metrics

Contributors

All

Activities

load more
can not load any more
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