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
.
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.
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' },
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>
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'),
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
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
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
HtmlWebpackPlugin
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!