1、vue ui創建項目
2、選擇基本配置項
3、運行項目
4、新建rem.js文件
// 基準大小
const baseSize = 32
// 設置 rem 函數
function setRem () {
// 當前頁面寬度相對于 750 寬的縮放比例，可根據自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 設置頁面根節點字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + "px"
}
// 初始化
setRem()
// 改變窗口大小時重新設置rem
window.onresize = function () {
setRem()
}
5、在main.js中引入
import "./utils/rem"
6、安裝postcss-pxtorem 自動轉換px為rem
npm install postcss-pxtorem -D
7、新建 .postcssrc.js文件
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"]
}
}
}
8、繼續運行報錯
9、新建vue.config.js文件(解決第八步報錯 )
module.exports = {
//雙擊index.html文件直接運行
publicPath: "./",
// 當運行 vue-cli-service build 時生成的生產環境構建文件的目錄
outputDir: "dist",
lintOnSave: true,
// 是否使用包含運行時編譯器的 Vue 構建版本。設置true后你就可以在使用template
runtimeCompiler: true,
// 生產環境是否生成 sourceMap 文件 sourceMap的詳解請看末尾
productionSourceMap: false,
configureWebpack: config => {
if (process.env.NODE_ENV === "production") { // 為生產環境修改配置...
return {
}
} else {
return {
}
}
},
css: {
extract: true, // 開啟 CSS source maps?
sourceMap: false, // css預設器配置項
modules: false,
loaderOptions: {
postcss: {
plugins: [
require("postcss-pxtorem")({
rootValue: 37.5, // 換算的基數
selectorBlackList: ["weui", "mu"], // 忽略轉換正則匹配項
propList: ["*"]
})
]
}
}
},
// webpack-dev-server 相關配置
devServer: { // 設置代理
hot: true, // 熱加載
host: "0.0.0.0", // ip地址
port: 8082, // 端口
https: false, // false關閉https，true為開啟
open: true, // 自動打開瀏覽器
overlay: {
warnings: false,
errors: false
}
}
}
10、自動適配完成
到此這篇關于vue移動端自適應適配問題詳解的文章就介紹到這了,更多相關vue移動端自適應內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/Jack_13201/article/details/116030930
