Exemple de code de la méthode Vue-cli pour créer une seule page sur plusieurs pages

Pour certains projets, une seule page ne peut pas bien répondre aux besoins, donc le projet d'une seule page créé par vue-cli doit être remplacé par un projet multipage. Cet article vous présente principalement la méthode de création d'un projet d'une seule page à plusieurs pages avec Vue-cli. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Vous devez modifier les fichiers suivants :

1. Télécharger le glob dépendant

$npm install glob --save-dev

2. build Le fichier

(1) Modifiez webpack.base.conf.js

et ajoutez le code suivant :

var glob = require('glob')；
var entries = getEntry('./src/pages/**/*.js')

Changez de module. Commentez

entry: {
   app: './src/main.js'
  },

dans les exportations, puis ajoutez cette ligne de code :

 entry: entries,

Quant à ce que sont les entrées, ne vous inquiétez pas, regardez ci-dessous :

Ajouter une méthode :

//获取入口js文件
function getEntry(globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  pathname = basename.split("_")[0]; //index_main.js得到index
  entries[pathname] = entry;
 });
 return entries;
}

Modifiez simplement le fichier comme ceci.

(2) Modifier webpack.dev.conf.js

Ajouter le code suivant :

//引入
var glob = require('glob')
var path = require('path')

Ajouter le code suivant aux plugins dans module.exports Commentez le

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),

, puis ajoutez le code suivant :

function getEntry(globPath) {
 
 var entries = {},basename;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');

for (var pathname in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname],  // 模板路径
  inject: true,       // js插入位置
  chunks:[pathname]
 };
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

Cela suffit pour modifier ce fichier.

(3) webpack.prod.conf.js

La routine de modification de ce fichier est similaire au fichier précédent
Ajoutez le code suivant : var glob = require( 'glob') Parce que lors de la création du projet, yes a été directement sélectionné pour toutes les dépendances facultatives lors de la génération du projet, donc la déclaration env dans le projet est définie comme suit :

Copier le code Le code est le suivant :

var env = process.env.NODE_ENV === 'testing ? require('../config/test.env') : config.build. env ;

Mais comme le fichier webpack.test.conf.js n'a pas encore été modifié, vous devez changer cette ligne de déclaration par la ligne suivante :

var env = config.build.env

Changez les plugins dans webpackConfig

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
}),

Commentez et ajoutez le code suivant après la définition de la déclaration webpackConfig :

function getEntry(globPath) {
 var entries = {},
  basename;
 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');

for (var pathname in pages) {
 var conf = {
   filename: process.env.NODE_ENV === 'testing'
    ? pathname + '.html'
    : config.build[pathname],
   template: pages[pathname],
   inject: true,
   minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
   },
   chunks:[pathname]
  }
 webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

A ce moment, ce fichier a également été modifié.

3. Modifiez le fichier sous config

Dans ce dossier, il vous suffit de modifier un seul fichier : index.js La fonction de ce fichier est de retrouver le. chemin du fichier, puis Selon le niveau de répertoire défini par ce fichier, le fichier packagé et la structure de fichier hiérarchique correspondante sont générés. Ajoutez le code suivant :

var build = {
 env: require('./prod.env'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,
 productionGzip: false,
 productionGzipExtensions: ['js', 'css']
}

function getEntry(globPath) {
 var entries = {},basename;

 glob.sync(globPath).forEach(function(entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');
 
//入口 index: path.resolve(__dirname, '../dist/index.html')
for (var pathname in pages) {
 build[pathname] = path.resolve(__dirname, '../dist/' + pathname + '.html')
}

Remplacez ensuite la valeur de build dans module.exports par la variable build que nous venons d'ajouter et de déclarer. Si vous souhaitez modifier la hiérarchie des répertoires packagés, vous pouvez la modifier dans la build ; vous pouvez également ajouter les variables que nous devons définir dans la build. Par exemple, nous devons copier fabfile.py et favicon.ico dans le répertoire a. dans le répertoire dist, vous pouvez simplement définir une propriété dans build,

distA:path.resolve(__dirname, '../dist/a),

et ensuite parce que 'copy-webpack-plugin' a été introduit dans webpack.prod.conf.js (var CopyWebpackPlugin = require( 'copy-webpack-plugin')), on peut ajouter le code suivant sous webpackConfig.plugins :

new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../fabfile.py'),
   to: config.build.distA,
   template: 'fabfile.py'
  }
 ])
new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../favicon.ico'),
   to: config.build.distA,
   template: 'favicon.ico'
  }
 ])

Ajouter le dossier pages dans le répertoire src

La structure hiérarchique du répertoire est organisé de manière similaire à ce formulaire :

5. Emballage

Après avoir effectué les modifications ci-dessus, bien qu'il n'y ait aucun problème en local opération, il y aura encore des problèmes après le packaging. , une erreur apparaîtra : webpackJsonp n'est pas défini
La solution est la suivante : Dans la conf définie dans la boucle for (var pathname in pages) sous le webpack.prod.conf .js, ajoutez deux lignes de code :

chunksSortMode: 'dependency', // dependency 页面中引入的js按照依赖关系排序；manual 页面中引入的js按照下面的chunks的数组中的顺序排序；

chunks: ['manifest', 'vender', pathname] // 生成的页面中引入的js，'manifest', 'vender'这两个js是webpack在打包过程中抽取出的一些公共方法依赖，其中，'manifest'又是从'vender'中抽取得到的，所以这三个js文件的依赖关系是 pathname依赖 'vender'，'vender'依赖'manifest'.

En résumé, voici le processus de transformation de ce projet d'une seule page à un projet multipage Concernant la modification du webpack.test. conf.js, une fois les modifications ultérieures réussies, des ajouts supplémentaires seront effectués.

Recommandations associées :

exemple d'application multipage de construction vue partage de code

exemple d'échafaudage multipage de reconstruction vue cli partage

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

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!