配置多环境变量&&rem适配

1. 配置多环境变量

package.json 里的 scripts 配置 serve test build，通过 --mode xxx 来执行不同环境

通过 npm run serve 启动本地 , 执行 development

通过 npm run test 打包测试 , 执行 testing

通过 npm run build 打包正式 , 执行 production

在项目根目录中新建.env.*

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

• NODE_ENV='development'

1. .env.staging 测试环境配置

• NODE_ENV='testing'

1. .env.production 正式环境配置

•  NODE_ENV='production'

config/index.js

 根据环境引入不同配置 process.env.NODE_ENV

const config = require('./env.' + process.env.NODE_ENV)
module.exports = config

配置对应环境的变量用户可以根据需求修改

本地环境配置

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

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

根据环境不同引入不同baseApi地址

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

rem 适配方案

安装这俩个插件并且引入

安装并引入插件

1.安装依赖

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

2. main.js 导入

// 移动端适配
 import ‘lib-flexible/flexible’; 

PostCSS 配置

在.postcssrc.js中配置，可以根据项目需求进行修改

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值

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