


This article mainly introduces the detailed explanation of Vue-cli webpack mobile terminal automatic construction rem problem. Now I will share it with you and give you a reference.
I believe that many friends think that their mobile projects can be automatically converted to rem, which is in line with the front-end trend. It is very inconvenient and error-prone to make changes by handwriting or editor plug-ins. I am online After searching a lot of methods, I found the following problems:
1 I followed the old video tutorial and found that the various plug-in versions of node npm webpack px2rem are different and useless at all
2 The tutorials on the Internet were lacking and incomplete, and it took me a long time to figure it out. I thought about manually setting the cssrem settings of vscode, but I was still not convinced, so I pieced together everything and finally got it. , and finally worked out the following method, which I hope will be helpful to everyone in automating the construction of rem for mobile terminals
1 I won’t go into detail about installing vue-cli, everyone should know it
2 Install and configure px2rem-loader (I didn’t use postcss here. I tried many problems but decided to use this one)
Step one: npm install px2rem-loader
Part 2: Add objects under webpack.base.conf.js. Here I use sass. If you use other ones, just follow the following rules. I believe everyone can understand it
module.exports={ module: { rules: [ { test: /\.(css|less|scss)(\?.*)?$/, loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader' } ] } }
The third step: Add something to the plugins under webpack.dev.conf.js. You must pay attention to the remUnit attribute, which is 40px in the case of Apple 5. I set it to 40 here, and there are also People set it as 80, my 40 here is to match the use of hotcss. I will talk about it below
plugins: [ new webpack.LoaderOptionsPlugin({ // webpack 2.0之后, 此配置不能直接写在自定义配置项中, 必须写在此处 vue: { postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })] } } ]
The fourth part: Many people don’t know this Yes, many people just miss this step. Find const cssLoader under utils.js and add ?importLoaders=1
const cssLoader = { loader: 'css-loader?importLoaders=1', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } }
The installation is complete now
Input font-size:40px
Output font-size:1rem (under iphone)
3 We all know that the pixel ratio of devices is different , so we use hotcss to adjust the pixel ratio link of the device
I put it in src/assets/js/, and you can introduce the method according to your habits
You can define any name. Here I changed hotcss.js to viewport.js
module.exports = { entry: { app: './src/main.js', rem: './src/assets/js/viewport.js' } }
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. help.
Related articles:
Ajax method of reading properties resource file data
Ajax method to achieve regular update of a page block Content method
Ajax method to obtain response content length
##
The above is the detailed content of Detailed explanation of Vue-cli webpack mobile terminal automatic build rem problem. For more information, please follow other related articles on the PHP Chinese website!

Vue是一款优秀的JavaScript框架,它可以帮助我们快速构建交互性强、高效性好的Web应用程序。Vue3是Vue的最新版本,它引入了很多新的特性和功能。Webpack是目前最流行的JavaScript模块打包器和构建工具之一,它可以帮助我们管理项目中的各种资源。本文就为大家介绍如何使用Webpack打包和构建Vue3应用程序。1.安装Webpack

区别:1、webpack服务器启动速度比vite慢;由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。2、vite热更新比webpack快;vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖,而webpack基于node。4、vite的生态不及webpack,加载器、插件不够丰富。

随着Web开发技术的不断发展,前后端分离、模块化开发已经成为了一个广泛的趋势。PHP作为一种常用的后端语言,在进行模块化开发时,我们需要借助一些工具来实现模块的管理和打包,其中webpack是一个非常好用的模块化打包工具。本文将介绍如何使用PHP和webpack进行模块化开发。一、什么是模块化开发模块化开发是指将程序分解成不同的独立模块,每个模块都有自己的作

在vue中,webpack可以将js、css、图片、json等文件打包为合适的格式,以供浏览器使用;在webpack中js、css、图片、json等文件类型都可以被当做模块来使用。webpack中各种模块资源可打包合并成一个或多个包,并且在打包的过程中,可以对资源进行处理,如压缩图片、将scss转成css、将ES6语法转成ES5等可以被html识别的文件类型。

Webpack是一款模块打包工具。它为不同的依赖创建模块,将其整体打包成可管理的输出文件。这一点对于单页面应用(如今Web应用的事实标准)来说特别有用。

配置方法:1、用导入的方法把ES6代码放到打包的js代码文件中;2、利用npm工具安装babel-loader工具,语法“npm install -D babel-loader @babel/core @babel/preset-env”;3、创建babel工具的配置文件“.babelrc”并设定转码规则;4、在webpack.config.js文件中配置打包规则即可。

怎么解决高并发大流量问题?下面本篇文章就来给大家分享下高并发大流量web解决思路及方案,希望对大家有所帮助!

随着现代Web应用程序的复杂性不断增加,构建优秀的前端工程和插件系统变得越来越重要。随着SpringBoot和Webpack的流行,它们成为了一个构建前端工程和插件系统的完美组合。SpringBoot是一个Java框架,它以最小的配置要求来创建Java应用程序。它提供了很多有用的功能,比如自动配置,使开发人员可以更快、更容易地搭建和部署Web应用程序。W


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Dreamweaver CS6
Visual web development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
