Vue-cli webpack 모바일 단말기 자동 빌드 렘 문제에 대한 자세한 설명

이 글은 주로 Vue-cli webpack 모바일 단말기 자동 구축 렘 문제에 대한 자세한 설명을 소개하고 있으니 참고하시기 바랍니다.

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

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. 여기서는 40으로 설정했는데 어떤 사람들은 80으로 설정했는데 여기의 40은 hotcss에 사용하기 위한 것입니다. 아래에서 이야기하겠습니다

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

4부: 많은 사람들이 이 단계를 놓치고 있습니다. utils.js에서 ?importLoaders=1

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

설치가 완료되었습니다

입력 글꼴 크기:40px

출력 글꼴 크기:1rem(아이폰 아래)

3 장비는 다 알죠. 픽셀 비율이 다르기 때문에 hotcss를 사용하여 디바이스의 픽셀 비율 링크를 조정합니다

src/assets에 넣습니다. /js/. 자신의 습관에 따라 메소드를 정의할 수 있습니다. 여기서는 hotcss.js를 viewport.js

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

로 변경했습니다. 앞으로 모든 사람에게 도움이 될 것입니다.

관련 기사:

속성 리소스 파일 데이터를 읽는 Ajax 메서드

페이지의 특정 콘텐츠에 대한 정기적인 업데이트를 구현하는 Ajax 메서드

응답 콘텐츠 길이를 가져오는 Ajax 메서드

위 내용은 Vue-cli webpack 모바일 단말기 자동 빌드 렘 문제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!