Der Unterschied zwischen benutzerdefinierten Pfad-Alias-Assets und statischen Ordnern in vue-cli

Vorn geschrieben:

Dies ist eine kurze Einführung in mehrere kleine Wissenspunkte von Vue-Cli. Es ist für Studenten geeignet, die neu im Vue-Cli-Gerüst sind und nicht viel wissen darüber haben die Großen einen Umweg gemacht. Freunde in Not können einen Hinweis hinterlassen oder ihm folgen. Ich hoffe, er kann allen helfen.

Verarbeitung statischer Ressourcen:

Der Unterschied zwischen Assets und statischen Ordnern

Ich glaube, viele Leute wissen, dass vue-cli zwei Orte zum Platzieren statischer Ressourcen hat, nämlich src/assetsOrdner und staticOrdner, vielen Menschen ist der Unterschied zwischen den beiden möglicherweise nicht klar.

Die Dateien im Assets-Verzeichnis werden vom Webpack verarbeitet und in Modulabhängigkeiten analysiert , und es werden nur relative Pfadformen unterstützt. Beispielsweise ist „./logo.png“ in <img src="./logo.png" alt="Der Unterschied zwischen benutzerdefinierten Pfad-Alias-Assets und statischen Ordnern in vue-cli" >
und background: url(./logo.png) ein relativer Ressourcenpfad, der von Webpack als Modulabhängigkeit aufgelöst wird. Dateien im Verzeichnis

static/ werden von Webpack nicht verarbeitet: Sie werden direkt in das endgültige Verpackungsverzeichnis kopiert (Standard ist dist/static). Auf diese Dateien muss mit absoluten Pfaden verwiesen werden, die durch die Verbindungen build.assetsPublicPath und build.assetsSubDirectory in der Datei config.js bestimmt werden.

Jede Datei, die in static/ abgelegt wird, muss als absoluter Pfad referenziert werden: /static/[Dateiname].

In unserer aktuellen Entwicklung gilt im Allgemeinen: Statisch enthält Dateien, die sich nicht ändern, und Assets enthalten Dateien, die sich ändern können.

So referenzieren Sie Bilder in JS-Daten

Da Webpack Bilder als Module referenziert, müssen Sie „require“ verwenden, um Bilder in JS zu referenzieren, und Sie können die Zeichenfolgenform nicht direkt verwenden.

js部分：
    data () {
        return {
             imgUrl: '图片地址',//错误写法 
            imgUrl: require('图片地址')//正确的写法
        }
}
template部分：
img标签形式：
<img  :src="img" / alt="Der Unterschied zwischen benutzerdefinierten Pfad-Alias-Assets und statischen Ordnern in vue-cli" >
或者p背景图形式：
<p :style="{backgroundImage: &#39;url(&#39; + img + &#39;)&#39;}"></p>

Nachdem ich über Bilder gesprochen habe, möchte ich nur die Konfiguration im Zusammenhang mit einem Bild von vue-cli erwähnen. Die Konfiguration im Bild unten bedeutet: Base64-Konvertierung unter dem 10000b-Bild durchführen, falls vorhanden Einige Vergleiche im Projekt Für kleine Symbole ist es nicht erforderlich, Bild-Sprites zu verarbeiten

Webpack+vue benutzerdefinierter Pfad-Alias

vue-cli verwendet Webpack, Sie können auch die benutzerdefinierte Alias-Funktion von Webpack verwenden Anpassen der Funktion zum Definieren von AliasenWenn Sie mehrschichtige Ordner verschachteln, müssen Sie den Pfad nicht Schicht für Schicht suchen. Sie können den benutzerdefinierten Alias ​​direkt verwenden, um den Speicherort der Datei zu ermitteln.

Einstellungsmethode:

**Einstellungsadresse: **webpack.base.conf.js-Datei im Build-Ordner
Spezifische Einstellungen:

resolve: {
    extensions: ['.js', '.vue', '.json'],
     alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'static':path.resolve(__dirname, '../static'),//增加这一行代码
        }
    },

Verwendung:

Fügen Sie bei der Verwendung ein „~“ davor ein, wie im Screenshot unten, obwohl Webstorm hier einen Fehler auslöst , wir können es ignorieren, der Code läuft normal.

Interpretation:

Hier erhält „static“ eine Adresse, sodass „~static“ den Pfad direkt ersetzen kann, wenn der Pfad in das Programm eingeführt wird. .. / static ', persönlicher Test, auch wenn mehrere Verschachtelungsebenen vorhanden sind, kann der Pfad erfolgreich gefunden werden.

Bereinigen Sie nutzlose Plug-Ins im Projekt

Viele Leute sind wie ich, sie installieren am Anfang viele Plug-Ins und dann Am Ende werden sie nicht im Projekt verwendet. Es wurden schon so viele Plug-Ins installiert und Sie haben sogar vergessen, welche Plug-Ins Sie installiert haben?

package.json

An der im Bild oben gezeigten Position befinden sich alle von unserem Projekt installierten Modulabhängigkeiten in dieser pageage.json-Datei Wenn Sie Ihre eigenen Abhängigkeiten klären müssen, können Sie in dieser Datei nachsehen, ob es Abhängigkeiten gibt, die nicht mehr nützlich sind. Sie können die Befehlszeile npm remove 模块名字 verwenden, um nutzlose Module zu löschen.

Der Unterschied zwischen –save-dev und –save

Einige der oben genannten Abhängigkeiten sind Module, die nur in der Entwicklungsumgebung verwendet werden, und einige sind Module, auf die Sie sich auch danach weiterhin verlassen werden Das Projekt geht online. Der Unterschied zwischen ihnen besteht darin, dass wir normalerweise Modulabhängigkeiten installieren: --save-dev und --save

Wenn Sie --save-dev zum Installieren von Abhängigkeiten verwenden, werden diese unter dem devDependencies-Objekt von package.json platziert im Gegenteil, wenn Sie --save zum Installieren von Abhängigkeiten verwenden, werden diese unter dem Abhängigkeitsobjekt angezeigt.

Zusammenfassung: * –save-dev ist etwas, auf das Sie sich bei der Entwicklung verlassen, –save ist etwas, auf das Sie sich auch nach der Veröffentlichung verlassen. *

Ich habe bereits zwei Artikel über die Vue-Cli-Konfiguration geschrieben. Schüler, die es benötigen, können es lesen:

Lernen Sie, wie man das Vue-Cli-Gerüst verwendet

Bezugnahme auf jQuery, Bootstrap und Verwendung von Sass und weniger zum Schreiben von CSS im Vue-Cli-Gerüst

Spätere Wörter

Das Obige ist der Inhalt dieses Artikels, der einige meiner Übungsprojekte für a darstellt Zeitraum Kleine Anhäufung, es wird einige Inhalte im Follow-up geben, da das Projekt eng ist, werde ich Sie vielleicht später treffen.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen benutzerdefinierten Pfad-Alias-Assets und statischen Ordnern in vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!