Vue 老项目 如何实现响应式布局

​

vue项目实现大屏展示 自适应问题

此处的项目为vue2版本，因为该项目立项阶段未要求兼容大屏设备和移动端设备，原设计稿尺寸1920X1080像素，如何实现响应式布局。

一、安装 postcss-px2rem 和 lib-flexible-computer

npm install postcss-px2rem --save

npm install lib-flexible-computer --save

二、修改全局 CLI 配置

module.exports = {
    publicPath: "./",
    outputDir: "dist",
    lintOnSave: true,
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require("postcss-px2rem")({
                        remUnit: 192 //  设计图宽度/10
                    })
                ]
            }
        }
    },
};

三、修改 main.js

import Vue from 'vue'
import App from './App'
// 计算响应式
import 'lib-flexible-computer'

new Vue({
    render: h => h(App)
}).$mount('#app')

四、注意

1. 会自动将vue文件style标签中的px转换城rem；
2. 不能将标签内嵌样式中的px转换城rem；