So konvertieren Sie ein einseitiges Gerüst von vue+cli in ein mehrseitiges Gerüst

Dieses Mal werde ich Ihnen die Methode zum Konvertieren eines einseitigen Vue+Cli-Gerüsts in ein mehrseitiges Gerüst vorstellen. Was sind die Vorsichtsmaßnahmen für die Konvertierung eines einseitigen Vue+Cli-Gerüsts? -Seitengerüst. Hier ist der eigentliche Kampf. Werfen wir einen Blick auf den Fall.

Das offiziell bereitgestellte Projektgenerierungstool vue-cli unterstützt keine mehrseitige WebApp, aber in tatsächlichen Projekten benötigen wir ein solches Gerüst. Hier ist eine Methode, die ich habe Die Umwandlung eines einseitigen Gerüsts in ein mehrseitiges Gerüst dient als Referenz. Bitte korrigieren Sie mich, wenn ich irgendwelche negativen Punkte habe.

Vorbereitung

Verwenden Sie vue-cli, um ein einseitiges Projektgerüst zu generieren, das Sie benötigen, und dann beginnen wir mit unserem Änderungsprojekt.

Rekonstruktionsprozess

Schritt 1: Ändern Sie die Verzeichnisstruktur

Schritt 1 Erstellen Sie einen neuen Ansichtsordner im src-Verzeichnis und anschließend einen neuen Indexordner im Ansichtenordner

Schritt 2 Verschieben Sie main.js und App.vue im src-Verzeichnis in den Indexordner in Schritt 1 und benennen Sie main.js in index.

um Schritt 3 Verschieben Sie den Router-Ordner im src-Verzeichnis in den Indexordner in Schritt 1. Wenn Sie keinen Router verwenden, können Sie ihn in index.js auskommentieren, da es sich nicht bei jeder meiner Seiten um eine Einzelseitenanwendung handelt Daher ist es nicht erforderlich, die Routing-Funktion

zu verwenden Schritt 4 Verschieben Sie die Datei index.html im Stammverzeichnis in den Indexordner in Schritt 1

Schritt 2: Ändern Sie die Konfigurationsdatei unter Build

In einer Produktionsumgebung werden eindeutige JS-Dateien in Seiten gepackt und öffentliche JS-Dateien werden nicht in einem Klumpen gepackt. Auch die Dateiverzeichnisstruktur nach dem Packen ist relativ klar. Alle Änderungen befinden sich im Build-Ordner

Schritt 1: Ändern Sie utils.js, fügen Sie zwei Funktionen hinzu, eine dient zum Abrufen mehrerer Einträge auf der Seite und die andere zum Eingeben der gepackten Seite und fügt js ein:

var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(dirname, '../src/views')
var merge = require('webpack-merge')
//多入口配置
//获取views文件夹下，每个页面下的index.js作为页面入口，故每个页面下都必须有index.js
exports.entries = function() {
 var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')
 var map = {}, tmp = [], pathname = '';
 entryFiles.forEach((filePath) => {
 var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
 tmp = filePath.split('/').splice(-4)
 map[tmp[2] + '/' + filename] = filePath
 })
 return map
}
//多页面输出配置
//读取views文件夹下的对应每个页面的html后缀文件，然后放入数组中
//如果想要更深的定制或者修改，建议大家看一下CommonsChunkPlugin
//推荐一个基础的 https://segmentfault.com/q/1010000009070061
exports.htmlPlugin = function() {
 let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
 let arr = []
 entryHtml.forEach((filePath) => {
 let jsPath = '', tmp = [];
 let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
 tmp = filePath.split('/').splice(-4)
 jsPath = tmp[2] + '/' + 'index'
 let conf = {
  template: filePath,
  filename: filename + '.html',
  chunks: ['manifest', 'vendors', jsPath],
  inject: true
 }
 if (process.env.NODE_ENV === 'production') {
  conf = merge(conf, {
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
  })
 }
 arr.push(new HtmlWebpackPlugin(conf))
 })
 return arr
}
step2 修改webpack.base.conf.js文件配置的入口
// entry: {
// app: './src/main.js'
// },
entry: utils.entries(),
step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代码，将其注释掉：
new HtmlWebpackPlugin({
 filename: 'index.html',
 template: 'index.html',
 inject: true
}),

Fügen Sie unsere obige Methode nach dem Plugins-Attributwert hinzu. Hier ist der Codeausschnitt:

// new HtmlWebpackPlugin({
 // filename: 'index.html',
 // template: 'index.html',
 // inject: true
 // }),
 new FriendlyErrorsPlugin()
 ].concat(utils.htmlPlugin())
step4 修改webpack.prod.conf.js 找到下面的代码，注释掉：
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'
}),

Fügen Sie unsere obige Methode nach dem Plugins-Attributwert hinzu. Hier ist der Codeausschnitt:

new CopyWebpackPlugin([{
  from: path.resolve(dirname, '../static'),
  to: config.build.assetsSubDirectory,
  ignore: ['.*']
 }])
 ].concat(utils.htmlPlugin())

Konfiguration abgeschlossen. Starten Sie das Projekt einfach ganz normal.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte der JS-Manipulation der Objekttransparenz

Vue-Routing wird beim Aktualisieren gerendert im Verlaufsmodus So gehen Sie mit einer Seite um, die nicht angezeigt wird

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie ein einseitiges Gerüst von vue+cli in ein mehrseitiges Gerüst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!