配置 多环境变量+rem+vant

凹凸曼也蛋疼

一.设置多情况变量

 1.package.json 里的 scripts 设置 serve（开辟） test（测试） build（消费）
 

1. "scripts": {
2.     "serve": "vue-cli-service serve --open",
3.     "test": "vue-cli-service build --mode testing",
4.     "build": "vue-cli-service build",
5.   }

复造代码

2.正在根目次创立3个文件 （以.env.*开首）
 (1) .env.development 当地开辟情况设置
    NODE_ENV='development'
 (2) .env.testing 测试情况设置
    NODE_ENV='production'
 (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
 

1. module.exports = {
2.   plugins: {
3.     autoprefixer: {
4.       overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
5.     },
6.     'postcss-pxtorem': {
7.       rootValue: 75,
8.       propList: ['*']
9.     }
10.   }
11. }

复造代码

三.vant UI组件按需减载

1.经由过程npm装置
npm i vant -S
2.装置插件
npm i babel-plugin-import -D
3.正在babel.config.js中设置

1. const plugins = [
2.   [
3.     'import',
4.     {
5.       libraryName: 'vant',
6.       libraryDirectory: 'es',
7.       style: true
8.     },
9.     'vant'
10.   ]
11. ]
12. module.exports = {
13.   presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
14.   plugins
15. }

复造代码

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

1. // 按需齐局引进 vant组件
2. import Vue from 'vue'
3. import {Button} from 'vant'
4. Vue.use(Button)

复造代码

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！