Einführung in den Prozess der Rekonstruktion mehrseitiger Gerüste basierend auf Vue CLI

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

im Produktionsumgebung Als nächstes werden wir eindeutige JS-Dateien in Seiten packen und öffentliche JS-Dateien extrahieren, damit 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 zu erhalten, 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 Plugin-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. Das Folgende 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 normal.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So lösen Sie das Problem, dass Vue 2.0 die Projektseite in IE11 leer öffnet

Über Vuex @2.3 Der Status in .0 unterstützt die Funktionsdeklaration

VUEJS 2.0-Unterkomponentenzugriff/Aufruf der übergeordneten Komponente

Das obige ist der detaillierte Inhalt vonEinführung in den Prozess der Rekonstruktion mehrseitiger Gerüste basierend auf Vue CLI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!