Comment convertir un échafaudage d'une seule page vue+cli en un échafaudage multipage

Cette fois, je vais vous présenter la méthode de conversion d'un échafaudage d'une seule page vue+cli en un échafaudage multipage. Quelles sont les précautions pour convertir un échafaudage d'une seule page vue+cli en multi. -page échafaudage. Voici le combat réel. Jetons un coup d'œil au cas.

L'outil de génération de projet officiellement fourni, vue-cli, ne prend pas en charge les webApp multipages, mais dans les projets réels, nous avons besoin d'un tel échafaudage. Nous nous référons aux méthodes de nombreux experts. Voici une méthode pour laquelle je suis. la conversion d'un échafaudage d'une seule page en un échafaudage de plusieurs pages est pour votre référence. Veuillez me corriger si j'ai des points négatifs.

Préparation

Utilisez vue-cli pour générer l'échafaudage de projet d'une seule page dont vous avez besoin, puis nous commencerons notre projet de modification.

Processus de reconstruction

Étape 1 Changer la structure des répertoires

étape 1 Créez un nouveau dossier de vues sous le répertoire src, puis créez un nouveau dossier d'index sous le dossier de vues

étape 2 Déplacez main.js et App.vue dans le répertoire src vers le dossier index à l'étape 1 et renommez main.js en index.

étape 3 Déplacez le dossier du routeur dans le répertoire src vers le dossier index à l'étape 1. Si vous n'utilisez pas de routeur, vous pouvez le commenter dans index.js. Je ne l'ai pas utilisé car chacune de mes pages n'est pas une application d'une seule page. , c'est donc inutile. Utilisez la fonction de routage

. étape 4 Déplacez le fichier index.html du répertoire racine vers le dossier index à l'étape 1

Étape 2 Modifier le fichier de configuration sous build

Dans un environnement de production, les fichiers js uniques seront regroupés dans des pages et les fichiers js publics seront extraits. Tout ne sera pas regroupé en un seul bloc. La structure des répertoires de fichiers après l'empaquetage est également relativement claire. Toutes les modifications sont dans le dossier build

étape 1 Modifiez utils.js, ajoutez deux fonctions, l'une est utilisée pour obtenir plusieurs entrées de la page et l'autre est utilisée pour saisir la page packagée et injecter js :

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
}),

Ajoutez notre méthode ci-dessus après la valeur de l'attribut des plugins. Voici l'extrait de code :

// 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'
}),

. Ajoutez notre méthode ci-dessus après la valeur de l'attribut des plugins. Voici l'extrait de code :

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

. Configuration terminée. Il suffit de démarrer le projet normalement.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes de manipulation JS de la transparence des objets

le routage vue est rendu une fois actualisé en mode historique Comment gérer la page non reflétée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!