We know that Vue can quickly develop web single-page applications, and the official provided us with our own application scaffolding vUE – CLI, we just need to download the scaffolding, install the dependency after the vue application prototype. This benefits from webPack dependency tracking, loaders with various resource suffixes, and the power of related WebPack plug-ins.

In some cases, however, we have many pages of development needs, in this case, we can build multiple page corresponding multiple applications, such as through the vue – cli generate multiple applications directory, but more than that on the one hand, a lot of repeated building code and the boilerplate code, also can destroy the uniformity of application is not easy to maintain. We can make scaffolding capable of building multi-page applications by modifying the Webpack configuration on a vue-CLI basis.

The configuration of the entry and output is the most important part of webPack’s packaging and compilation of vue files, so we will mainly change the configuration of these two parts.

My personal blog is a VUE multi-page application, including the client and background management of two parts, the following as an example to illustrate how to achieve vUE multi-page application, the whole process is based on VUE-CLI2.

Entrance to the configuration

The entry configuration is relatively simple. Open webpack.base.conf.js and just modify the entry configuration as follows:

entry: {
    client:  ["babel-polyfill", "./src/Client/main.js"],
    manager: ["babel-polyfill", "./src/Manager/main.js"],
},
Copy the code

The addition of Babel-Polyfill is mainly compatible with older browsers because Babel only converts new JavaScript syntax by default, not new apis. Global objects such as Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, and Promise, as well as methods defined on global objects such as Object.assign, do not transcode.

Output configuration

Output configuration to configure the output of the development environment and production environment separately, let’s configure the development environment first. Open webpack.dev.conf.js, add the following configuration to the Plugin configuration item, and remove the original HtmlWebpackPlugin configuration.

new HtmlWebpackPlugin({
      filename: 'client.html',
      template: './tpl/index.html',
      inject: true,
      chunks: ['client'],
}),
new HtmlWebpackPlugin({
      filename: 'manager.html',
      template: './tpl/index.html',
      inject: true,
      chunks: ['manager'],
}),
Copy the code

Fliename is the name of the file to compile the output, and template is the HTML template. Different pages can use the same template or different templates.

In fact, the page resources we access in the development environment are managed in memory by Webpack, and webpack-dev-server serves as a local service that returns memory resources to the browser based on the URL to render the page. The answer isto configure historyApiFallback under devServer. This configuration item will be passed to the connect-history-api-Fallback middleware. Redirects the REQUESTED URL to avoid page 404 in the development environment as follows:

historyApiFallback: {
     rewrites: [
        { from: 'index', to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
        { from: /\/admin/, to: path.posix.join(config.dev.assetsPublicPath, 'admin.html') },
      ],
 },
Copy the code

After starting the project, use localhost:8080 to view the client page, and use localhost:8080/admin to view the background management page.

To configure the production environment, first open config/index.js and add the output path and name of the target HTML to the build configuration item.

index: path.resolve(__dirname, '.. /server/public/index.html'), admin: path.resolve(__dirname, '.. /server/public/admin.html'),Copy the code

Next open build/webpack.prod.conf.js and add the following configuration to Pulgin:

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: './tpl/index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },

      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'client']
}),

new HtmlWebpackPlugin({
      filename: config.build.admin,
      template: './tpl/index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
        chunksSortMode: 'dependency',
        chunks: ['manifest', 'vendor', 'manager']
}),
Copy the code

One important thing to note here is that chunks must be configured, otherwise all packaged files will be imported into admin.html and index.html at the same time.

This completes the entire VUE multi-page configuration. As you can see, if you add a level 1 page to your project, you need to modify the WebPack configuration multiple times, which is tedious. A better way to do this is with a layer of encapsulation based on vue-cli2, which is an extended example of multipage-vue-CLI that I wrote.

The history mode

There are times when you can’t tolerate # symbols on urls in hash mode because of obsessive-compulsive behavior, or you can’t have # symbols on urls because of business requirements. At this time, the vue-router history mode should be considered. The front-end configuration of the History mode is basically the same as the previous one, but the jump of URL path in the history mode is dynamically added by vue-router using the HISTORY API of H5. Manually refreshing the page will cause a 404 error because routes cannot be found. Therefore, you need to configure the server to redirect routes to the level-1 page. For example, you can configure nginx as follows:

server { listen 80; Location ^~ / API {proxy_pass http://127.0.0.1:3000; } location /admin { root /home/silentport.github.io/nginx/blog/; index admin.html; try_files $uri $uri/ /admin.html; } location / { root /home/silentport.github.io/nginx/blog; index index.html; try_files $uri $uri/ /index.html; }}Copy the code

Among them,

The first configuration forwards all requests starting with/API to the Node server for processing; The second configuration is to redirect all requests beginning with /admin to admin.html; The third configuration is to redirect all requests that do not start with API and admin to index.html. The root configuration can also respond to static files on the page.

The problem is that when you do a route switch in admin.html and manually refresh it, the ADMIN in the URL disappears and nginx redirects it to the client’s page. To solve this problem, you need to add a base configuration item to the vue-router in the admin page, so that the URL always carries this base when redirecting to the router. The configuration is as follows:

export default new Router({
  mode: 'history',
  base: '/admin',
  routes: [
    
  ]
})
Copy the code

After all of the above configuration, the history mode is ready to work.