懂得工具的基础使用方法很重要

TLDR

修改 Vue-cli 生成的 Single-page Application 项目配置,实现开发多页面的功能。

关键点: Webpack 多入口 及 webapck-html-plugin 的使用。

项目地址:vue-multi-pages-application

详细

Webpack 多入口

build/entries.js

module.exports = {
  index: './src/index.entry.js',
  login: './src/login.entry.js',
};

每个入口代表一个页面,即一个 HTML。官方文档 Entry and Context

html-webpack-plugin

为每个入口实例化 html-webpack-plugin ,就可满足多页面需求。

参见:Generating Multiple HTML Files