Ein einfaches Beispiel für die Entwicklung mehrseitiger Anwendungen mit vue-cli

Erstellen Sie ein Projekt

Verwenden Sie vue-cli, um ein Projekt zu erstellen

$ vue init webpack vue-multiple-demo

Folgen Sie den Konsolenanweisungen und geben Sie die relevanten Informationen ein. Geben Sie nach der Erstellung das Projektstammverzeichnis ein und installieren Sie die Abhängigkeiten.

$ cd vue-multiple-demo
$ npm install

Da wir eine mehrseitige Anwendung entwickeln, ist für dieses Projekt keine Konfiguration vorhanden vue-router.

Das einfachste Beispiel

Projekte, die über vue-cli erstellt wurden, entwickeln standardmäßig einseitige Anwendungen. Wenn Sie mehrere Seiten entwickeln möchten, müssen Sie die Konfiguration einiger Skripte anpassen.

Eintrag

Erstellen Sie einen neuen src im Verzeichnis demo.js. Kopieren Sie den Inhalt der Einfachheit halber direkt in main.js. Ändern Sie dann build/webpack.base.conf.jss entry so, dass es mehrere sind.

entry: {
  app: './src/main.js',
  demo: './src/demo.js'
},

Vorlage

Erstellen Sie eine neue demo.html-Datei im Projektstammverzeichnis und kopieren Sie auch den Inhalt von index.html dorthin. Um sie zu unterscheiden, bearbeiten Sie nur den Inhalt von <title>.

<title>demo</title>

Adresse veröffentlichen

Fügen Sie einen neuen Datensatz unter der config/index.js-Konfiguration von build hinzu.

index: path.resolve(__dirname, '../dist/index.html'),
demo: path.resolve(__dirname, '../dist/demo.html'),

Konfiguration der Produktionsumgebung

Passen Sie die Konfiguration von build/webpack.prod.conf.js in plugins an. html

Änderung

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency',
  chunks: ['manifest', 'vendor', 'app']
}),

Hier gibt es zwei wesentliche Änderungen

• Schreiben Sie es einfach auffilename

• Um zu verhindern, dass unnötiges

  geladen wird, fügen Sie die js-Konfiguration hinzu. chunks

Neu hinzugefügt

new HtmlWebpackPlugin({
  filename: config.build.demo,
  template: 'demo.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency',
  thunks: ['manifest', 'vendor', 'demo']
}),

Vorschaueffekt

Lokale Dienste werden hier nicht gestartet, daher müssen die statischen Ressourcen dies tun Ladepfad geändert werden, d. h.

in config/index.js in build->assetsPublicPath ändern. ./

assetsPublicPath: './',

Erstellen Sie die Anwendung

$ npm run build

Öffnen Sie die Datei

direkt im Verzeichnis dist, um eine Vorschau des Effekts anzuzeigen. html

Zusammenfassung

An diesem Punkt ist das einfachste Beispiel für die Entwicklung mehrerer Seiten abgeschlossen.

Weitere Optimierung

In der tatsächlichen Entwicklung ist die Anzahl der Seiten groß, sodass die folgenden Konfigurationen stapelweise verarbeitet werden müssen.

Dateiverzeichnis

Die Verzeichnisstruktur des Quellcodeteils

ist wie folgtsrc

• Assets

• logo.png

• Komponenten

• HelloWorld.vue

• Einträge

• index.js

• list.js

• Vorlagen

• index.html

• list.html

Gemäß der Vereinbarung

• Die entries Datei, die zum Speichern des Seiteneintrags verwendet wirdjs

• Die zum Speichern der Seite verwendete VorlagetemplatesDateihtml

Verzeichnis lesen

Um das Lesen des Seitenverzeichnisses zu erleichtern, verwenden Sie

, um hier eine Methode zu erweitern. glob

$ npm install glob --save-dev

Fügen Sie nach der Installation der Abhängigkeiten Methoden hinzu in

build/utils.js

const glob = require('glob')

// 遍历指定目录下的文件
exports.getEntries = (dirPath) => {
  let filePaths = glob.sync(dirPath);
  let entries = {};
  filePaths.forEach(filePath => {
    let filename = filePath.match(/(\w+)\.[html|js]+/)[1];
    entries[filename] = filePath;
  })
  return entries;
}

Ändern Sie die Konfiguration

build/webpack.base.conf.js

entry: utils.getEntries('./src/entries/*.js'),

build/webpack.base.prod.conf.js

Löschen Sie die ursprüngliche

zugehörige Konfiguration und durchlaufen Sie die zugehörige Konfiguration und fügen Sie sie vor dem Ende der Datei hinzu. HtmlWebpackPlugin

const pages = utils.getEntries('./src/templates/*.html');
for(let page in pages) {
  let fileConfig = {
    filename: path.resolve(__dirname, '../dist/pages/' + page + '.html'),
    template: pages[page],
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    thunks: ['manifest', 'vendor']
  };
  fileConfig.thunks.push(page);
  // 添加插件配置
  webpackConfig.plugins.push(new HtmlWebpackPlugin(fileConfig));
}

config/index.js

Da die Ausgabeadresse hier nicht konfiguriert ist, hat das vorherige Löschen keine Auswirkungen darauf. Allerdings muss nach der Anpassung der Verzeichnisstruktur auch der Pfad zum Laden statischer Ressourcen in der Seite angepasst werden.

assetsPublicPath: '../',

Erstellen und Vorschau anzeigen

$ npm run build

Nachdem die Erstellung abgeschlossen ist, öffnen Sie direkt mit dem Browser die Datei

im Verzeichnis dist, um eine Vorschau des Effekts anzuzeigen. html

Zusammenfassung

Eine kurze Zusammenfassung des Folgenden, wobei

verwendet wird, um mehrere Schlüsselpunkte mehrseitiger Anwendungen zu entwickeln. vue-cli

• Mehrere Einträge

• Mehrere

  HtmlWebpackPlugin

• Statischer Ressourcenpfad

Die in diesem Artikel vorgestellte Konfiguration ist möglicherweise nicht auf alle Entwicklungsszenarien anwendbar. Um immer mehr Details zu optimieren, bedarf es immer noch kontinuierlicher Übung in der tatsächlichen Entwicklung.

Verwandte Empfehlungen:

Vue erstellt mehrseitige Beispiel-Codefreigabe für Anwendungen

Vue-cli erstellt eine einzelne Seite zu einer mehrseitigen Methodenbeispielcode

Vue CLI-Rekonstruktion, mehrseitiges Gerüstbaubeispiel, Teilen

Das obige ist der detaillierte Inhalt vonEin einfaches Beispiel für die Entwicklung mehrseitiger Anwendungen mit vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!