Home > Article > Web Front-end > A simple example of developing multi-page applications with vue-cli
Use vue-cli
Create a project
$ vue init webpack vue-multiple-demo
Follow the console prompts and fill in the relevant information. After creation, go to the root directory of the project and install the dependencies.
$ cd vue-multiple-demo $ npm install
Since it is developing a multi-page application, the project is not configured vue-router
.
The project created through vue-cli
defaults to developing a single-page application. If you want to develop multiple pages, you need to adjust the configuration of some scripts.
Create a new demo.js
in the src
directory. For convenience, directly add main.js
Copy the content in . Then, modify the entry
of build/webpack.base.conf.js
to multiple.
entry: { app: './src/main.js', demo: './src/demo.js' },
Create a new demo.html
file in the project root directory, and also copy the contents of index.html
. In order to distinguish them, only edit the content of <title>
.
<title>demo</title>
Add a new record under the build
configuration of config/index.js
.
index: path.resolve(__dirname, '../dist/index.html'), demo: path.resolve(__dirname, '../dist/demo.html'),
Adjust build/webpack.prod.conf.js
in plugins
, about html
Configuration.
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'] }),
There are two main changes here
filename
Directly write to death
To prevent unnecessary loading of js
, add chunks
configuration.
Newly added
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'] }),
The local service is not started here, so you need to modify the loading path of the static resources , that is, change build->assetsPublicPath
in config/index.js
to ./
.
assetsPublicPath: './',
Build the application
$ npm run build
Directly open the html
file in the dist
directory to preview the effect.
At this point, the simplest example of developing multiple pages is completed.
In actual development, the number of pages is large, so the following configurations need to be processed in batches.
The directory structure of the source code partsrc
is as follows
assets
logo.png
js
file used to store the page entry
Templates used to store pageshtml
Files
to extend a method. <pre class="brush:php;toolbar:false">$ npm install glob --save-dev</pre>
After installing the dependencies, add methods in
<pre class="brush:php;toolbar:false">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;
}</pre>
Modify the configuration
entry: utils.getEntries('./src/entries/*.js'),
related configuration, and just traverse and add related configuration before the end of the file. <pre class="brush:php;toolbar:false">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));
}</pre>
config/index.js
assetsPublicPath: '../',
Build and preview
$ npm run build
file in the dist
directory to preview the effect. Summary
to develop several key points of multi-page applications.
Related recommendations:
vue builds multi-page application example code sharingVue-cli creates a single page to multi-page method example Codevue cli reconstruction multi-page scaffolding example sharingThe above is the detailed content of A simple example of developing multi-page applications with vue-cli. For more information, please follow other related articles on the PHP Chinese website!