Vue-cli webpack 모바일 터미널을 사용하여 자동으로 rem을 빌드하는 방법

这次给大家带来如何使用Vue-cli webpack移动端自动化构建rem，使用Vue-cli webpack移动端自动化构建rem的注意事项有哪些，下面就是实战案例，一起来看一下。

많은 친구들이 모바일 프로젝트를 자동으로 rem으로 변환하길 원한다고 생각하는데, 이는 프런트 엔드 추세에 맞춰 손글씨나 편집기 플러그인으로 변경하는 것이 매우 불편하고 오류가 발생하기 쉽습니다. 이 방법을 통해 다음과 같은 문제가 발견되었습니다.

1 이전 비디오 튜토리얼을 따라한 결과 node npm webpack px2rem의 다양한 플러그인 버전이 다르고 쓸모가 없다는 것을 발견했습니다.

2 온라인 튜토리얼이 부족하고 불완전합니다. 그것을 알아내는 데 오랜 시간이 걸렸습니다. vscode의 cssrem을 수동으로 설정하는 것에 대해 생각해 보았지만 여전히 확신이 없어서 결국 자동화하기를 희망하면서 다음과 같은 방법을 생각해 냈습니다. rem은 모두의 모바일 터미널 구축에 도움이 됩니다

1 vue-cli 설치에 대해 자세히 설명하지 않겠습니다. 모두가 알아야 합니다.

2 px2rem-loader 설치 및 구성(여기서는 postcss를 사용하지 않았고 시도했습니다) 많은 문제가 있었지만 이것을 사용하기로 결정했습니다.

1단계: npm install px2rem-loader

2부: webpack.base.conf.js 아래에 객체를 추가합니다. 여기서는 sass를 사용합니다. 다음 규칙을 따르시면 이해하실 수 있을 거라 믿습니다

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}

3단계: webpack.dev.conf.js 아래 플러그인에 무언가를 추가하세요. 모든 사람은 remUnit 속성에 주의를 기울여야 합니다. Apple 5의 경우에는 40px입니다. 여기서는 40으로 설정하고 80으로 설정하는 사람도 있습니다. I 여기의 40은 hotcss에 사용하기 위한 것입니다. 아래에서 설명하겠습니다

 plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

4부: 많은 사람들이 이것을 모르고 있습니다. 이 단계에서는 utils.js에서 const cssLoader를 찾아 ?importLoaders=1

 const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

지금까지 설치가 완료되었습니다.

입력 글꼴 크기:40px

출력 글꼴 크기:1rem(iPhone에서) )

3 우리는 기기마다 픽셀 비율이 다르다는 것을 모두 알고 있으므로 hotcss를 사용합니다. 기기의 픽셀 비율 링크를 조정합니다

src/assets/js/에 넣습니다. 어떤 이름이든 직접 정의할 수 있습니다. 여기서는 hotcss.js를 viewport.js로 변경했습니다.

module.exports = {
 entry: {
  app: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}

JS를 사용하여 숫자 유형 배열의 최대 요소를 찾는 방법

vuex 프로젝트 구조 디렉터리 및 구성을 올바르게 사용하는 방법

위 내용은 Vue-cli webpack 모바일 터미널을 사용하여 자동으로 rem을 빌드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!