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: [] })] } } ]
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
const cssLoader = { loader: 'css-loader?importLoaders=1', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } }
Ajax-Methode zum Lesen von Eigenschaftenressourcendateidaten
Ajax-Methode zum regelmäßigen Aktualisieren eines bestimmten Blocks von die Seiteninhaltsmethode Ajax-Methode zum Abrufen der AntwortinhaltslängeDas 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!