vue项目实现pc端适配

1、安装依赖包

cnpm i lib-flexible --save
cnpm i postcss-px2rem --save

2、main.js文件引用

// main.js
import 'lib-flexible'

3、在node_modules包里找到lib-flexible文件夹下的flexible.js文件

修改其中的宽度，将宽度改为当前页面的宽度

function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          width = width * dpr;
      }
      var rem = width / 10;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }

4、然后在vue.config.js配置中引用对应的文件配置

const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 192, //设计稿十等分后的值1rem=192px
  remPrecision: 6 //转化后小数点位数
})

module.exports = {
  publicPath: '',
  outputDir: '../_Publish/reportCenter',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    }
  },
  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')
      }
    },
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `static/js/[name].${defaultSettings.appVersion}.${timestamp}.js`,
      chunkFilename: `static/js/[name].${defaultSettings.appVersion}.${timestamp}.js`
    }
  },
  css: {
    //PC分辨率端适配
    loaderOptions: {
      css: {},
      postcss: {
        plugins: {
          postcss
        }
      }
    }
  },
}

最后重新编译项目即可。