A simple example of developing multi-page applications with vue-cli

Create project

Use vue-cliCreate 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 simplest example

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.

Entry

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

Template

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>

Publishing address

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

Production environment configuration

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

Preview effect

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.

Summary

At this point, the simplest example of developing multiple pages is completed.

Further optimization

In actual development, the number of pages is large, so the following configurations need to be processed in batches.

File directory

The directory structure of the source code partsrc is as follows

• assets

• logo.png

• ##components

##HelloWorld.vue

entries
index.js
list.js

templates
index.html
list.html

According to the agreement

• entries

  js file used to store the page entry

• templates

  Templates used to store pageshtml Files

Reading directory

To facilitate reading the page directory , here use

glob

to extend a method. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$ npm install glob --save-dev</pre><div class="contentsignin">Copy after login</div></div>After installing the dependencies, add methods in

build/utils.js

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const glob = require('glob') // 遍历指定目录下的文件 exports.getEntries = (dirPath) =&gt; {   let filePaths = glob.sync(dirPath);   let entries = {};   filePaths.forEach(filePath =&gt; {     let filename = filePath.match(/(\w+)\.[html|js]+/)[1];     entries[filename] = filePath;   })   return entries; }</pre><div class="contentsignin">Copy after login</div></div>Modify the configuration

build/webpack.base.conf. js

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

build/webpack.base.prod.conf.js

Delete the original

HtmlWebpackPlugin

related configuration, and just traverse and add related configuration before the end of the file. <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>config/index.js

Since the output address is not configured here, the previous deletion will not affect it. However, after adjusting the directory structure, the path for loading static resources in the page must also be adjusted.

assetsPublicPath: '../',

Build and preview

$ npm run build

After the construction is completed, directly use the browser to open the

html

file in the dist directory to preview the effect. Summary

Briefly summarize the following, using

vue-cli

to develop several key points of multi-page applications.

Multiple entries
Multiple
• HtmlWebpackPlugin

static resources Path
The configuration introduced in this article may not be applicable to all development scenarios. Optimizing more and further details still requires continuous practice in actual development.

Related recommendations:

vue builds multi-page application example code sharing

Vue-cli creates a single page to multi-page method example Code

vue cli reconstruction multi-page scaffolding example sharing

The 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!