So verwenden Sie CLI zum Rekonstruieren mehrseitiger Gerüste in Vue

Dieser Artikel führt Sie Schritt für Schritt in den Prozess der Rekonstruktion mehrseitiger Gerüste basierend auf Vue CLI ein. Er ist sehr gut und hat Referenzwert.

Das offiziell bereitgestellte Projekt Das Generierungstool vue-cli verfügt nicht über die richtige Unterstützung für mehrseitige WebApps, aber in tatsächlichen Projekten benötigen wir ein solches Gerüst. Nachdem wir auf die Methoden vieler Experten zurückgegriffen haben, finden Sie hier eine Lösung für die Konvertierung meines einseitigen Gerüsts in ein mehrseitiges Gerüst Gerüst 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 Verzeichnisstruktur ändern

• Schritt 1 Erstellen Sie einen neuen Ansichtsordner im Verzeichnis src und anschließend einen neuen Indexordner im Verzeichnis Ansichten

• Schritt 2 Verschieben Sie main.js und App.vue im Verzeichnis src in den Index von Schritt 1 Ordner und benennen Sie main.js in index.js um

• Schritt 3 Verschieben Sie den Router-Ordner im src-Verzeichnis in den Indexordner in Schritt 1, falls er nicht verwendet wird. Der Router kann im Index auskommentiert werden .js, aber ich habe es nicht verwendet, da jede meiner Seiten keine Einzelseitenanwendung ist. Es besteht keine Notwendigkeit, die Routing-Funktion zu verwenden

• Schritt 4 Ändern Sie den Index im Stammverzeichnis Verzeichnis Verschieben Sie die .html-Datei in den Indexordner in Schritt 1

Schritt 2 Ändern Sie die Konfigurationsdatei im Build

Sie wird unterteilt in Die Produktionsumgebung Die Seite packt eindeutige JS-Dateien und extrahiert öffentliche JS-Dateien, sodass nicht alles in einen Klumpen gepackt wird. Auch die Dateiverzeichnisstruktur nach dem Packen ist relativ klar. Alle Änderungen befinden sich im Build-Ordner

Schritt 1: Ändern Sie utils.js und fügen Sie zwei Funktionen hinzu. Eine wird verwendet, um mehrere Einträge für die Seite abzurufen, und die andere wird verwendet, um die gepackte Seite einzugeben und js einzufügen:

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:

// 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:

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

Konfiguration abgeschlossen. Starten Sie das Projekt einfach normal.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Wie erzielt man in jQuery den Animationseffekt des Abprallens von der Kante?

Wie kann das Problem gelöst werden, dass Vue keine Änderungen in Arrays oder Objekten erkennen kann?

Welche Methoden gibt es, um der Erkennungssequenz in Vue neue Attribute von Objekten hinzuzufügen?

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CLI zum Rekonstruieren mehrseitiger Gerüste in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!