Vueモバイル端末の適応化問題の詳細説明

// 基本サイズ const baseSize = 32
// rem関数を設定する function setRem() {
  // 現在のページ幅を 750 幅に対して拡大縮小する比率。必要に応じて変更できます。
  定数スケール = document.documentElement.clientWidth / 750
  // ページのルートノードのフォントサイズを設定します。 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// setRem() を初期化する
// ウィンドウサイズを変更するときに rem をリセットする
window.onresize = 関数 () {
  リセット()
} 

'./utils/rem' をインポートします

npm インストール postcss-pxtorem -D 

モジュール.エクスポート = {
  「プラグイン」: {
    "postcss-import": {},
    "postcss-url": {},
    // 対象ブラウザを編集するには、package.json の "browserslist" フィールドを使用します
    「自動プレフィックス」: {},
    "postcss-pxtorem": {
      "ルート値": 32,
      "propList": ["*"]
    }
  }
} 

モジュール.エクスポート = { 
  //index.html ファイルをダブルクリックして直接実行します publicPath: './',
  // vue-cli-service build を実行したときに生成される本番環境ビルドファイルのディレクトリ outputDir: 'dist',
  保存時にlint: true、
  // ランタイムコンパイラを含む Vue ビルドを使用するかどうか。 trueに設定するとテンプレートが使えるようになる
  ランタイムコンパイラ: true、
  //本番環境でソースマップファイルを生成するかどうか。ソースマップの詳細については末尾を参照してください。productionSourceMap: false、
  Webpack の設定: config => {
    if (process.env.NODE_ENV === 'production') { // 本番環境の設定を変更...
      戻る {

      }
    } それ以外 {
      戻る {

      }
    }
  },
  css: {
    extract: true, // CSS ソースマップを有効にしますか?
    sourceMap: false, // cssプリセット構成項目 modules: false,
    ローダーオプション: {
      ポストcss: {
        プラグイン: [
          '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: {
      警告: 偽、
      エラー: 偽
    }
  }
}