# 首先下载 cnpm install lib-flexible postcss-plugin-px2rem --save-dev

# 完成下载之后

main.js 导入： import ‘lib-flexible/flexible’;

//在vue.config中添加
module.exports = {
   
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        rootValue:75, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                        // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                        //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                        // propBlackList: [], //黑名单
                        // exclude: /(page_pc)/i,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                        exclude: /node_modules/i,
                        // selectorBlackList: ['van-'], //要忽略并保留为px的选择器,我们一般不转换vantui中的大小
                        // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                        // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                        mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
                        minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                    }),
                ]
            }
        }
    },
}

已完成

# vue 中配置多环境变量

//在package.json文件中添加
	"serve": "vue-cli-service serve",  
    "build": "vue-cli-service build",
    "stage": "vue-cli-service build --mode staging",
    "lint": "vue-cli-service lint"

1.在根目录下创建
	.env.development
	.env.production
	.env.staging
    对应的分别是开发模式，生产模式，测试模式
2.在src中创建一个config文件夹里面创建
	index.js
	env.development.js
	env.production.js
	env.staging.js

//.env等文件夹中写入
//开发模式
NODE_ENV='development'
# must start with VUE_APP_ 
VUE_APP_ENV = 'development'
 
 //生产模式
NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'
 
 //测试模式
 NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

//config等env文件中
// 本地环境配置
module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'https://www.365msmk.com/api', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
  APPID: 'xxx',
  APPSECRET: 'xxx',
  $cdn: 'https://gimg2.baidu.com'
}



//在axios中添加
import { baseUrl } from '../config'
console.log(baseUrl)
const instance = axios.create({
  baseURL: baseUrl,
  timeout: 5000
})

Vue