Ausführliche Erläuterung des Problems mit der automatischen Build-Remote des mobilen Vue-cli-Webpack-Terminals

In diesem Artikel wird hauptsächlich das Problem der automatischen Konstruktion von Vue-cli-Webpack-Mobilterminals erläutert. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.

Ich glaube, dass viele Freunde ihre mobilen Projekte automatisch in REM konvertieren möchten, was dem Front-End-Trend entspricht. Es ist sehr umständlich und fehleranfällig, Änderungen per Handschrift oder Editor-Plug-Ins vorzunehmen . Ich bin online, habe viele Möglichkeiten gesucht und die folgenden Probleme gefunden:

1 Ich habe das alte Video-Tutorial verfolgt und festgestellt, dass die verschiedenen Plug-In-Versionen von Node NPM Webpack Px2rem unterschiedlich und nutzlos sind

2 Die Tutorials im Internet waren mangelhaft und unvollständig, und es hat lange gedauert, bis ich es herausgefunden habe. Ich habe darüber nachgedacht, das CSSREM von vscode manuell festzulegen, war aber immer noch nicht überzeugt Ich habe alles zusammengesetzt und es endlich geschafft, und schließlich die folgende Methode ausgearbeitet, die hoffentlich für alle bei der Automatisierung der rem-Konstruktion für mobile Endgeräte hilfreich sein wird

1 Ich werde nicht näher darauf eingehen vue-cli installieren, das sollte jeder wissen

2 Installiere und konfiguriere px2rem-loader (Ich habe hier viele Probleme ohne die Verwendung von Postcss ausprobiert, mich aber für dieses entschieden)

Schritt 1: npm install px2rem-loader

Kapitel Teil 2: Objekte unter webpack.base.conf.js hinzufügen. Wenn Sie andere verwenden, befolgen Sie einfach die folgenden Regeln Ich glaube, jeder kann es verstehen

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

Der dritte Schritt: Fügen Sie etwas zu den Plugins unter webpack.dev.conf.js hinzu. Darauf müssen Sie achten das remUnit-Attribut, das im Fall von Apple 5 40 Pixel beträgt. Ich habe es hier auf 40 eingestellt, und es ist auch auf 80 eingestellt, und 40 ist hier für die Verwendung mit hotcss. Ich werde weiter unten darauf eingehen , viele Leute verpassen diesen Schritt einfach. Suchen Sie const cssLoader unter utils.js und fügen Sie ?importLoaders=1

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

Bis hierhin ist die Installation abgeschlossen

Eingabeschriftgröße:40px

Ausgabeschriftgröße:1rem (unter iPhone)

3 Wir alle wissen, dass das Pixelverhältnis von Geräten unterschiedlich ist , also verwenden wir hotcss, um den Pixelverhältnis-Link des Geräts anzupassen

Ich füge es in src/assets/js/ ein und Sie können die Methode entsprechend Ihren Gewohnheiten einführen

Sie können einen beliebigen Namen definieren.

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

Das Obige habe ich für alle zusammengestellt Seien Sie in Zukunft für alle hilfreich.

Verwandte Artikel:

Ajax-Methode zum Lesen von Eigenschaftenressourcendateidaten

Ajax-Methode zum regelmäßigen Aktualisieren eines bestimmten Blocks von die Seiteninhaltsmethode

Ajax-Methode zum Abrufen der Antwortinhaltslänge

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Problems mit der automatischen Build-Remote des mobilen Vue-cli-Webpack-Terminals. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!