多环境适配

1.项目有三种模式：生产模式、开发模式、测试模式

2.在package.json文件里面-->script-->

     "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "stage": "vue-cli-service build --mode staging"  [--mode staging 是必须填写的]

3.首先要创建三个文件夹，创建环境变量

.env.development  .env.production  .env.staging

在这三个文件夹里面有两个环境变量： NEDE_ENV 和 VUE_APP_自定义

        在.env.development里面---->

                NODE_ENV='development'

                VUE_APP_ENV='development'

        在.env.production里面---->

                NODE_ENV='production'

                VUE_APP_ENV='production'

        在.env.staging里面---->

                NODE_ENV='production'

                VUE_APP_ENV='staging'

4.在src目录里面新建config文件夹-->在该文件夹里面创建四个js文件

        env.development.js  env.production.js   env.staging.js   index.js

        在这三个（env.development.js  env.production.js   env.staging.js）js文件里面导出端口号model.exports={ baseUrl: '  端口号  ' }

        在index.js里面 process.env.

                let environment = process.env.VUE_APP_ENV 

                let config=require('./env.'+environment)

                module.exports=config

       最后在main.js中通过import引入 import {baseUrl } from  '@/config/index.js'

5.rem适配

     rem：root em 根元素即html的font-size，如果 html的font-size：16px；那么 1rem = 16px

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值
• 安装命令：cnpm install lib-flexible postcss-pxtorem --save-dev
• 在main.js中引入   // 移动端适配   import ‘lib-flexible/flexible’;
• 在src目录中新建文件.postcssrc.js

• module.exports = {
    plugins: {
      autoprefixer: {
        overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
      },
      'postcss-pxtorem': {
        rootValue: 75,
        propList: ['*']
      }
    }
  }