vue移動(dòng)端自適應(yīng)適配問題詳解

更新時(shí)間：2021年04月25日 09:40:01 作者：Jack_13201

這篇文章主要介紹了vue移動(dòng)端自適應(yīng)適配問題，本文通過實(shí)例代碼詳解給大家介紹的非常詳細(xì)，需要的朋友可以參考下

1、vue ui創(chuàng)建項(xiàng)目

在這里插入圖片描述

2、選擇基本配置項(xiàng)

在這里插入圖片描述

3、運(yùn)行項(xiàng)目

在這里插入圖片描述

4、新建rem.js文件

// 基準(zhǔn)大小
const baseSize = 32
// 設(shè)置 rem 函數(shù)
function setRem () {
  // 當(dāng)前頁面寬度相對(duì)于 750 寬的縮放比例，可根據(jù)自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 設(shè)置頁面根節(jié)點(diǎn)字體大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置rem
window.onresize = function () {
  setRem()
}

在這里插入圖片描述

5、在main.js中引入

import './utils/rem'

在這里插入圖片描述

6、安裝postcss-pxtorem 自動(dòng)轉(zhuǎn)換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、繼續(xù)運(yùn)行報(bào)錯(cuò)

在這里插入圖片描述

9、新建vue.config.js文件(解決第八步報(bào)錯(cuò) )

module.exports = { 
  //雙擊index.html文件直接運(yùn)行
  publicPath: './',
  // 當(dāng)運(yùn)行 vue-cli-service build 時(shí)生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄
  outputDir: 'dist',
  lintOnSave: true,
  // 是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本。設(shè)置true后你就可以在使用template
  runtimeCompiler: true,
  // 生產(chǎn)環(huán)境是否生成 sourceMap 文件 sourceMap的詳解請(qǐng)看末尾
  productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') { // 為生產(chǎn)環(huán)境修改配置...
      return {

      }
    } else {
      return {

      }
    }
  },
  css: {
    extract: true, // 開啟 CSS source maps?
    sourceMap: false, // css預(yù)設(shè)器配置項(xiàng)
    modules: false,
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // 換算的基數(shù)
            selectorBlackList: ['weui', 'mu'], // 忽略轉(zhuǎn)換正則匹配項(xiàng)
            propList: ['*']
          })
        ]
      }
    }
  },

  // webpack-dev-server 相關(guān)配置
  devServer: { // 設(shè)置代理
    hot: true, // 熱加載
    host: '0.0.0.0', // ip地址
    port: 8082, // 端口
    https: false, // false關(guān)閉https，true為開啟
    open: true, // 自動(dòng)打開瀏覽器
    overlay: {
      warnings: false,
      errors: false
    }
  }
}

在這里插入圖片描述