Vue CLI Refactoring mehrseitiges Gerüst-Beispiel-Sharing

Das offiziell bereitgestellte Projektgenerierungstool vue-cli unterstützt keine mehrseitige WebApp, aber in tatsächlichen Projekten benötigen wir eine solche Gerüstmethode. Dieser Artikel enthält eine einseitige Version von mir Die Lösung zur Umwandlung von Gerüsten in mehrseitige Gerüste 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 unter dem src-Verzeichnis und erstellen Sie dann einen neuen Index darunter Ordner „Ansichten“

• 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.js um

• Schritt 3 Verschieben Sie den Router-Ordner im src-Verzeichnis in den Indexordner in Schritt 1. Wenn Sie den Router nicht verwenden, können Sie ihn in index.js auskommentieren, da ich ihn nicht jedes Mal verwende Ich verwende es. Diese Seite ist keine Einzelseitenanwendung, daher ist es nicht erforderlich, die Routing-Funktion zu verwenden.

• Schritt 4 Verschieben Sie die Datei index.html im Stammverzeichnis in den Index Ordner in Schritt 1
  

Schritt 2 Ändern Sie die Konfigurationsdatei im Build

In der Produktionsumgebung werden eindeutige JS-Dateien in Seiten und öffentliche JS-Dateien gepackt Es wird nicht alles in einen Klumpen gepackt. 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. Das Folgende ist ein 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 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.

Verwandte Empfehlungen:

So verwandeln Sie Vue-cli in einen Verlaufsmodus, der mehrere Seiten unterstützt

Webpack-Builds reagieren mehrseitig

Beispielcodeanalyse eines mehrseitigen Crawlers in NodeJS

Das obige ist der detaillierte Inhalt vonVue CLI Refactoring mehrseitiges Gerüst-Beispiel-Sharing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!