vue-cli3用rem进行适配步骤
-
安装手淘的flexible,插件名称叫amfe-flexible
npm i amfe-flexible --save-dev
npm i postcss-pxtorem
-
在main.js导入
import 'amfe-flexible' -
在/vue.config.js添加px2rem插件,把项目中的px转为rem
const autoprefixer = require("autoprefixer"); const pxtorem = require("postcss-pxtorem"); const path = require("path"); const themePath = path.resolve(__dirname, "src/assets/style/theme.less"); module.exports = { // 关闭eslint检查 lintOnSave: false, // 配置css前缀,px转rem css: { loaderOptions: { // vant换主题 less: { modifyVars: { hack: `true; @import "${themePath}";` } }, // 后处理器配置 postcss: { plugins: [ // 配置样式前缀 autoprefixer(), // 把px转为rem pxtorem({ rootValue: 37.5, propList: ["*"] }) ] } } }, configureWebpack: { externals: { axios: "axios" // 配置使用CDN } } };
