配置多环境变量和rem,vm的配置方案

1.配置多环境变量

1.1 基础

1.package.json 里的 scripts（启动解本） 配置的三种在启动 1.开发（serve)  2.测试（test）3.   生产(build)，通过 --mode xxx 来执行不同环境。

"scripts": {
    //开发的配置
  "serve": "vue-cli-service serve --open",
    //测试的配置
  "test": "vue-cli-service build --mode testing",
    //生产的配置
  "build": "vue-cli-service build",

}

--mode 模式设置的三种模式：开发模式（development），生产模式（production）， 测试（testing/staging）

1.2 创建三个文件，用来存储环境变量

1. 不可以乱取名 。

2. 三个文件：

(1) .env.development   本地开发环境配置

NODE_ENV='development'

(2) .env.production  正式环境配置

NODE_ENV='production'

(3) .env.testing  测试环境配置

NODE_ENV='production'

这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV development testing production
变量我们统一在 src/config/env.*.js 里进行管理。

这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？修改起来方便，不需要重启项目，符合开发习惯。

config/index.js

const environment = process.env.VUE_APP_ENV || 'development'
const config = require('./env.' + environment)
module.exports = config

配置对应环境的变量，拿本地环境文件 env.development.js 举例，用户可以根据需求修改

// 本地环境配置
module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'http://localhost:9018', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx'
}

根据环境不同，变量就会不同了

import {baseUrl} from '@/config'
console.log(baseUrl);

2.rem的配置方案

1.安装依赖

cnpm install lib-flexible postcss-pxtorem --save-dev

2. main.js 导入

// 移动端适配
 import 'lib-flexible/flexible'; 

3.vm的配置方案

1.安装依赖

npm install postcss-px-to-viewport -D

2.修改 .postcssrc.js

将根目录下 .postcssrc.js 文件修改如下：

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    }
  }
}

3.删除原来的 rem 相关代码
 src/main.js 删除如下代码：

// 移动端适配
import 'lib-flexible/flexible.js'

package.json 删除如下代码

"lib-flexible": "^0.3.2",
"postcss-pxtorem": "^5.1.1",

运行起来，F12 元素 css 就是 vw 单位了