与原来的vue-cli 2.x版本不同的是:如果使用最新版本的@vue/cli初始化vue项目时,通常看不到webpack的配制文件。而在原来的2.x版本,我们可以在utils.js中轻松配制px2rem相关配置。为了解决这个问题,我研究了一下vue-cli的官方文档,发现我们仍然可以像以往那样配制。具体步骤如下:
- 安装
安装lib-flexible:
npm install --save lib-flexible
1
安装postcss-loader和postcss-px2rem:
npm install --save-dev postcss-loader postcss-px2rem
1
2. 在项目入口文件main.js中引入lib-flexible
import ‘lib-flexible/flexible.js’
1
3. 在项目public目录的index.html头部加入手机端适配的meta的代码
vue.config.js
module.exports = {
css: {
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
plugins: [require(‘postcss-px2rem’)({
remUnit: 75
})]
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
这个文件配制的信息将会被合并到类似原来2.x版本的webpack.config.js当中。
注意: remUnit在这里要根据lib-flexible的规则来配制,如果您的设计稿是750px的,用75就刚刚好。
- 温馨提示
当你遇到1px的边框时,通常容易发现页面缺失部分边框,这时你可以使用/no/语法来屏蔽该属性转换,例如:
border: 1px solid red; /no/
1
由于字体的特殊性,我们在编译font-size属性时,通常不使用rem单位,这时候你可以这样使用:
font-size: 24px; /px/