Vue cli refactorisant le partage d'exemples d'échafaudages multipages-exploitation et maintenance Linux-php.cn

Vue cli refactorisant le partage d'exemples d'échafaudages multipages

小云云

Libérer： 2018-01-24 13:17:18

original

2341 Les gens l'ont consulté

L'outil de génération de projet officiellement fourni, vue-cli, ne prend pas en charge les applications Web 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. Cet article fournit une version d'une seule page de la mienne. La solution pour convertir un échafaudage en échafaudage multipage 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 un échafaudage de projet d'une seule page dont vous avez besoin, puis nous commencerons notre projet de modification.

Processus de reconstruction

Étape 1 Modifiez la structure des répertoires

étape 1 Créez un nouveau dossier de vues sous le répertoire src, puis créez un nouvel index sous le dossier de vues Dossier
é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.js
é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 le routeur, vous pouvez le commenter dans index.js car je ne l'utilise pas à chaque fois. Je l'utilise, Cette page n'est pas une application monopage, il n'est donc pas nécessaire d'utiliser la fonction de routage
étape 4 Déplacez le fichier index.html du répertoire racine vers l'index dossier à l'étape 1

Étape 2 Modifier le fichier de configuration en cours de construction

Dans l'environnement de production, les fichiers js uniques seront regroupés dans des pages et les js publics seront extrait. Tout ne sera pas regroupé en un seul morceau. 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
}),

Copier après la connexion

Ajoutez notre méthode ci-dessus après la valeur de l'attribut des plugins. Ce qui suit est un 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'
}),

Copier après la connexion

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

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

Copier après la connexion

Configuration terminée. Démarrez simplement le projet normalement.

Recommandations associées :

Comment transformer Vue-cli en un mode historique prenant en charge plusieurs pages

Les builds Webpack réagissent multi Page

Exemple d'analyse de code d'un robot d'exploration multipage dans nodejs

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!