Un exemple simple de développement d'applications multipages avec vue-cli

Créer un projet

Utilisez vue-cli pour créer un projet

$ vue init webpack vue-multiple-demo

Suivez les invites de la console et remplissez les informations pertinentes. Après la création, entrez dans le répertoire racine du projet et installez les dépendances.

$ cd vue-multiple-demo
$ npm install

Puisque nous développons une application multipage, ce projet n'a pas de configuration vue-router.

L'exemple le plus simple

Les projets créés via vue-cli développeront par défaut des applications d'une seule page. Si vous souhaitez développer plusieurs pages, vous devez ajuster la configuration de certains scripts.

Entrée

Créez un nouveau src sous le répertoire demo.js Pour plus de commodité, copiez directement le contenu dans main.js. Ensuite, modifiez les build/webpack.base.conf.js de entry pour qu'ils soient multiples.

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

Modèle

Créez un nouveau fichier demo.html dans le répertoire racine du projet et copiez également le contenu de index.html. Afin de les distinguer, éditez uniquement le contenu de <title>.

<title>demo</title>

Adresse de publication

Ajoutez un nouvel enregistrement sous la configuration config/index.js de build.

index: path.resolve(__dirname, '../dist/index.html'),
demo: path.resolve(__dirname, '../dist/demo.html'),

Configuration de l'environnement de production

Ajustez la configuration de build/webpack.prod.conf.js dans plugins. html

Modification

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',
  chunks: ['manifest', 'vendor', 'app']
}),

Il y a deux changements principaux ici

• Notez-le simplementfilename

• Pour éviter le chargement

  inutile, ajoutez la configuration js. chunks

Nouvellement ajouté

new HtmlWebpackPlugin({
  filename: config.build.demo,
  template: 'demo.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',
  thunks: ['manifest', 'vendor', 'demo']
}),

Effet d'aperçu

Les services locaux ne sont pas démarrés ici, les ressources statiques doivent donc être modifié. Chemin de chargement, c'est-à-dire remplacer

dans config/index.js par build->assetsPublicPath. ./

assetsPublicPath: './',

Créez l'application

$ npm run build

Ouvrez le fichier

dans le répertoire dist directement pour prévisualiser l'effet. html

Résumé

À ce stade, l'exemple le plus simple de développement de plusieurs pages est terminé.

Optimisation supplémentaire

Dans le développement réel, le nombre de pages est grand, les configurations suivantes doivent donc être traitées par lots.

Répertoire des fichiers

La structure des répertoires de la partie code source

est la suivantesrc

• actifs

• logo.png

• composants

• HelloWorld.vue

• entrées

• index.js

• list.js

• modèles

• index.html

• list.html

Selon l'accord

• Le entries fichier utilisé pour stocker l'entrée de la pagejs

• Le modèle utilisé pour stocker la pagetemplates Fichierhtml

Lire le répertoire

Pour faciliter la lecture du répertoire de la page, utilisez

pour étendre une méthode ici. glob

$ npm install glob --save-dev

Après avoir installé les dépendances, ajoutez des méthodes dans

build/utils.js

const glob = require('glob')

// 遍历指定目录下的文件
exports.getEntries = (dirPath) => {
  let filePaths = glob.sync(dirPath);
  let entries = {};
  filePaths.forEach(filePath => {
    let filename = filePath.match(/(\w+)\.[html|js]+/)[1];
    entries[filename] = filePath;
  })
  return entries;
}

Modifier la configuration

build/webpack.base.conf.js

entry: utils.getEntries('./src/entries/*.js'),

build/webpack.base.prod.conf.js

Supprimez la

configuration associée d'origine, et parcourez et ajoutez simplement la configuration associée avant la fin du fichier. HtmlWebpackPlugin

const pages = utils.getEntries('./src/templates/*.html');
for(let page in pages) {
  let fileConfig = {
    filename: path.resolve(__dirname, '../dist/pages/' + page + '.html'),
    template: pages[page],
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    thunks: ['manifest', 'vendor']
  };
  fileConfig.thunks.push(page);
  // 添加插件配置
  webpackConfig.plugins.push(new HtmlWebpackPlugin(fileConfig));
}

config/index.js

Étant donné que l'adresse de sortie n'est pas configurée ici, la suppression précédente ne l'affectera pas. Cependant, après avoir ajusté la structure des répertoires, le chemin de chargement des ressources statiques dans la page doit également être ajusté.

assetsPublicPath: '../',

Construire et prévisualiser

$ npm run build

Une fois la construction terminée, utilisez directement le navigateur pour ouvrir le fichier

dans le répertoire dist pour prévisualiser l'effet. html

Résumé

Un bref résumé de ce qui suit, en utilisant

pour développer plusieurs points clés des applications multipages. vue-cli

• Entrée multiple

• Plusieurs

  HtmlWebpackPlugin

• Chemin de ressource statique

La configuration présentée dans cet article peut ne pas être applicable à tous les scénarios de développement. L'optimisation de plus en plus de détails nécessite encore une pratique continue dans le développement réel.

Recommandations associées :

Vue crée un exemple de partage de code d'application multipage

Vue-cli crée une seule page en plusieurs pages exemple de méthode Code

vue cli reconstruction partage d'exemple d'échafaudage multipage

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!