环境：vue-cli + webpack + lib-flexible + px2rem-loader
1、安装 lib-flexible
npm install lib-flexible -save
2、main.js中引入lib-flexible
import 'lib-flexible/flexible'
3、在 index.html 中设置好meta放缩比例
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4、安装 px2rem-loader
npm install px2rem-loader
5、配置 px2rem-loader
// 5.1 在build中的utils.js中 将 px2rem-loader 配置到 cssloader中
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5 // 设计稿宽度/10
}
}
// 5.2 在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
vue中px转rem.jpg
6、启动项目 npm run dev
npm run dev
7、注意： vue-cli3.0中需要在vue.config.js中配置 chainWebpack
chainWebpack: config => {
config.module
.rule('scss')
.oneOf('vue')
.use('px2rem-loader')
.loader('px2rem-loader')
.before('postcss-loader') // this makes it work.
.options({ remUnit: 750 })
.end()
},
