Explication détaillée du problème de construction automatique du terminal mobile Vue-cli webpack

Cet article présente principalement l'explication détaillée du problème de construction automatique du terminal mobile Vue-cli webpack. Je vais maintenant le partager avec vous et vous donner une référence.

Je crois que de nombreux amis souhaitent convertir automatiquement leurs projets mobiles en rem, ce qui est conforme à la tendance front-end. Il est très peu pratique et sujet aux erreurs d'apporter des modifications par écriture manuscrite ou par des plug-ins d'éditeur. . Je suis en ligne, j'ai cherché de nombreuses façons et j'ai trouvé les problèmes suivants :

1 J'ai suivi l'ancien didacticiel vidéo et j'ai trouvé que les différentes versions de plug-in de node npm webpack px2rem sont différentes et inutiles.

2 Les tutoriels sur Internet manquaient et étaient incomplets, et il m'a fallu beaucoup de temps pour comprendre. J'ai pensé à paramétrer manuellement le cssrem de vscode, mais je n'étais toujours pas convaincu, alors. J'ai tout reconstitué et j'ai finalement compris. , et j'ai finalement élaboré la méthode suivante, qui, je l'espère, sera utile à tout le monde pour automatiser la construction de rem pour les terminaux mobiles

1 Je n'entrerai pas dans les détails. en installant vue-cli, tout le monde devrait le savoir

2 Installez et configurez px2rem-loader (j'ai essayé beaucoup de problèmes sans utiliser postcss ici mais j'ai décidé d'utiliser celui-ci)

Étape 1 : npm install px2rem-loader

Chapitre Partie 2 : Ajouter des objets sous webpack.base.conf.js Ici, j'utilise sass. Si vous en utilisez d'autres, suivez simplement les règles suivantes, je crois. tout le monde peut le comprendre.

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

La troisième étape : ajouter quelque chose aux plugins sous webpack.dev.conf.js. attention à l'attribut remUnit, qui est de 40px dans le cas d'Apple 5. Je l'ai mis à 40 ici, certaines personnes l'ont défini à 80, mon 40 ici est à utiliser avec hotcss j'en parlerai ci-dessous
<. 🎜>

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

Partie 4 : Ce que beaucoup de gens ne savent pas, c'est qu'ils manquent simplement cette étape. Recherchez const cssLoader sous utils.js et ajoutez ? importLoaders=1

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

Ça y est, l'installation est terminée

Entrée taille de police : 40px

Taille de police de sortie : 1rem (sous iphone)

3 Nous connaissons tous l'équipement Le rapport de pixels est différent, nous utilisons donc hotcss pour ajuster le lien de rapport de pixel de l'appareil

Je l'ai mis dans src/assets/js/ et vous pouvez l'ajuster selon vos habitudes

Présentez la méthode, vous pouvez définir n'importe quel nom vous-même. Ici, j'ai changé hotcss.js. to viewport.js

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

Ce qui précède est ce que j'ai compilé pour tout le monde. Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Méthode Ajax de lecture des données du fichier de ressources de propriétés

Méthode Ajax pour implémenter la mise à jour régulière d'une page bloquer la méthode de contenu

Méthode Ajax pour obtenir la longueur du contenu de la réponse

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!