Vue-cli3全局转换rem及不同环境下全局公共参数配置

vue-cli3配置px2rem将px转换成rem及全局公共参数配置

• px2rem一般配置大屏项目会减少配置不同分辨率的问题
• 写在行内的样式不会被转换

  vue.config.js配置

      'use strict'
      const path = require('path')
      const px2rem = require('postcss-px2rem')
      //配置px2rem将px转换成rem 配合rem等比适配配置文件
      const postcss = px2rem({
        remUnit: 16   //基准大小 baseSize，需要和rem.js中相同
      })
      function resolve(dir) {
        return path.join(__dirname, dir)
      }
      module.exports = {
          runtimeCompiler: 'true',
          publicPath: '/',
          outputDir: 'dist',
          assetsDir: 'dist/static',
          lintOnSave: process.env.NODE_ENV === 'development',
          productionSourceMap: false,
          devServer: {
              port: 8080,
              open: true,
              overlay: {
                warnings: false,
                errors: true
              },
              proxy: {
                  [process.env.VUE_APP_BASE_API]: {
                      target: process.env.VUE_APP_BASE_URL,
                      changeOrigin: true,
                      pathRewrite: {
                        ['^' + process.env.VUE_APP_BASE_API]: '/'
                      }
                  }
              }
          },
          configureWebpack: {
            // provide the app's title in webpack's name field, so that
            // it can be accessed in index.html to inject the correct title.
            name: name,
            resolve: {
              alias: {
                '@': resolve('src')
              }
            }
          },
          css: {
            loaderOptions: {
              postcss: {
                plugins: [
                  postcss
                ]
              }
            }
          }
      }
  }

  rem等比适配配置文件

• 在main.js全局引入该js

  // 基准大小
  const baseSize = 16
  // 设置 rem 函数
  function setRem () {
      // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
      const scale = document.documentElement.clientWidth / 1920
      // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
      document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
  }
  // 初始化
  setRem()
  // 改变窗口大小时重新设置 rem
  window.onresize = function () {
      setRem()
  }

  解决浏览器拖动边框echarts文字不会动态更改大小的问题

  let nowClientWidth = document.documentElement.clientWidth;
  Vue.prototype.turnTextSize = function (val,initWidth=1920) {
    return val * (nowClientWidth/initWidth);
  }
  //echarts使用方式
    textStyle : {
      fontWeight : 300 ,
       fontSize : this.turnTextSize(15),
    },

• 对于有些地方不用将px转换编译成rem的话写法如下

  font-size: 24px; /*no*/

  不同环境配置不同全局参数

• 在项目根目录创建 .env.native文件
• 在项目根目录创建 .env.development文件

  # just a flag
  ENV = 'native'
  VUE_APP_ENV = 'native'
  
  # base api
  VUE_APP_BASE_API = '/admin/api'
  VUE_APP_BASE_URL = 'http://11.11.11.11:1111'

  # just a flag
  ENV = 'development'
  VUE_APP_ENV = 'development'
  
  # base api
  VUE_APP_BASE_API = '/admin/api'
  VUE_APP_BASE_URL = 'http://22.22.22.22:2222'

• 在package.json中script创建新的打包命令
• 本地启动dev的时候走 native配置文件 打包development命令则走development配置文件

  "scripts": {
     "dev": "vue-cli-service serve --mode native",
     "build:development": "vue-cli-service build --mode development",
     "build:test": "vue-cli-service build --mode test",
   },

  在项目中获取全局参数

• process.env.配置文件中的api 实际开发页面中几乎用不到这种配置（除非不同环境中路径不同）

赏

谢谢你请我吃糖果

支付宝

微信