Introduction au processus de reconstruction d'un échafaudage multipage basé sur vue cli

Cet article vous présente étape par étape le processus de reconstruction d'un échafaudage multipage basé sur vue cli. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

Le projet officiellement fourni. l'outil de génération vue-cli n'a pas le bon support WebApp multipage, mais dans les projets réels, nous avons besoin d'un tel échafaudage. Après avoir fait référence aux méthodes de nombreux experts, voici une solution pour convertir mon échafaudage d'une seule page en plusieurs pages. échafaudage pour votre référence. Veuillez me corriger si j'ai des points négatifs.

Préparation

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

Processus de reconstruction

Étape 1 Modifier 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 l'index de l'étape 1 et renommez main.js en index.js

• étape 3 Déplacez le dossier du routeur dans le répertoire src vers le dossier index à l'étape 1, s'il n'est pas utilisé. Le routeur peut être commenté dans l'index .js, mais je ne l'ai pas utilisé car chacune de mes pages n'est pas une application monopage. Il n'est pas nécessaire d'utiliser la fonction de routage

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

Étape 2 Modifiez le fichier de configuration sous build

dans le environnement de production Ensuite, nous allons regrouper les fichiers js uniques dans des pages et extraire les fichiers js publics, afin que tout ne soit 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 Modifier utils.js et ajouter deux fonctions, l'une est utilisée pour obtenir plusieurs entrées pour 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. Démarrez simplement le projet normalement.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment résoudre le problème de Vue 2.0 ouvrant la page du projet vierge dans IE11

À propos de Vuex @2.3 L'état en .0 prend en charge la déclaration de fonction

Accès au sous-composant VUEJS 2.0/composant parent d'appel

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!