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

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

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

assetsPublicPath: './',

$ npm run build

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

est la suivantesrc

• actifs

• logo.png

• composants

• HelloWorld.vue

• entrées

• index.js

• list.js

• modèles

• index.html

• list.html

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

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

pour étendre une méthode ici. glob

$ npm install glob --save-dev

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;
}

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

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

assetsPublicPath: '../',

$ npm run build

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

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

• Entrée multiple

• Plusieurs

  HtmlWebpackPlugin

• Chemin de ressource statique

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!