配置 多环境变量+rem+vant

一.配置多环境变量

 1.package.json 里的 scripts 配置 serve（开发） test（测试） build（生产）

 

"scripts": {
    "serve": "vue-cli-service serve --open",
    "test": "vue-cli-service build --mode testing",
    "build": "vue-cli-service build",
  }

2.在根目录创建3个文件 （以.env.*开头）

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

    NODE_ENV='development'

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

    NODE_ENV='testing'

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

    NODE_ENV='production'

3.在src下新建一个config文件，里面创建4个文件夹（以env.*.js）

      (1).env.development.js

       module.exports = {
             baseUrl: 'http://localhost:9018',  // 项目地址
       }

      (2).env.production.js

        module.exports = {
             baseUrl: 'http://localhost:9018/production',  // 项目地址
        }

     (3).env.testing.js

       module.exports = {
             baseUrl: 'http://localhost:9018/testing',  // 项目地址
      }

     (4).config/index.js

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

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

      module.exports = config

     (5).在main.js中通过import引入（根据环境不同引入不同baseUrl地址）

      import { baseUrl } from '@/config'

      console.log(baseUrl)

二.rem适配方案

        1.安装依赖

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

              postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

     lib-flexible用于设置rem基准点

  2.main.js中导入

      import ‘lib-flexible/flexible’

  3.在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: ['*']
    }
  }
}

三.vant UI组件按需加载

1.通过npm安装

npm i vant -S

2.安装插件

npm i babel-plugin-import -D

3.在babel.config.js中设置

const plugins = [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    },
    'vant'
  ]
]
module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
  plugins
}

4.在src下创建一个plugins文件夹，里边创建vant.js

// 按需全局引入 vant组件
import Vue from 'vue'
import {Button} from 'vant'
Vue.use(Button)