使用Vue-cli开发多页面应用

大家都知道,Vue-cli是一个强大的脚手架工具,通常情况下,它使用webpack来开发部署SPA(单页面应用)。SPA是很好用,也能满足很多场景。然而SPA也不是万能的。比如你的团队需要同时开发多个项目,前端会公用用到一些自行开发的业务组件,但这些组件并不太成熟,需要不时修复一些bug。环境限制你无法将这些组件的最新版同步更新到各项目。此时一种比较好的解决方案就是将各项目的代码和组件库代码放到一个工程里。本质上这就是开发多页面应用了。如何使用Vue-cli开发开发多页面应用呢?

为了方便讲述,我们使用Vue-cli时选择webpack项目模板,运行完成后会生成一个SPA(单页面应用),我们在src下新建app1目录,并把项目根路径下和index.html文件和src的源码移到app1中。

复制app1目录并更名为app2,适当修改HelloWorld.vue中的代码让两个页面显示不同的内容。如下图所示。

我们的目标是在开发环境下能通过localhost:8080/app1localhost:8080/app2访问两个应用。此时运行开发环境肯定会报错。默认下,入口文件main.js是直接放置src下,index.html模板文件放置在根路径下,只要修改它们的路径就可以运行了。
第一步:打开webpack.base.conf.js,将单个入口

entry: {
  app: './src/main.js'
},

改成多个单个入口

entry: {
  app1: 'src/app1/main.js',
  app2: 'src/app2/main.js'
},

详细讲解请参考webpack文档:入口起点(entry points)。这里我们建立了两个入口app1app2,对应两个独立分离的依赖。此依赖会映射项目所需的每个模块,并生成一个或多个bundle并注入到index.html模板文件中。

第二步:接下来我们修改开发环境的index.html模板文件位置。打开webpack.dev.conf.js

webpack是使用来管理输出的。其中filename对应要写入的HTML文件,也就是我们最终在开发环境下要访问的html文件。我们在此处修改为app1/index.html

template对应webpack中模板文件的相对路径或绝对路径。默认情况下,如果存在,它将使用index.html。我们在此处修改为src/app1/index.html

有关详细信息,请参阅文档

本实例中,我们有两个入口,因此还要对app2进行HtmlWebpackPlugin插件配置,全部HtmlWebpackPlugin插件配置如下:

new HtmlWebpackPlugin({
  filename: './app1.html',
  template: './src/app1/index.html',
  inject: true
}),
new HtmlWebpackPlugin({
  filename: './app2.html',
  template: './src/app2/index.html',
  inject: true
})

npm start运行一下开发环境,我们看到可以访问localhost:8080/app1.htmllocalhost:8080/app2.html了,不过他们显示的都是app1.html的内容。为什么会这样呢,浏览器下查看页面源码,可以发现两个页面都注入了app1.jsapp1.js。由于app1.js放在app1.js后面,如果刚好覆盖,则显示的都是app1.html的内容。

第三步:如果你有多个webpack入口点, HtmlWebpackPlugin插件都会在生成的HTML文件中将他们注入到script标签内。如何只在页面中插入相应的打包js文件呢?可以通过显示设置它们的chunk仅为应用添加特定块,将它们的依赖导向(graph)到一个块。

完整的HtmlWebpackPlugin插件配置如下:

new HtmlWebpackPlugin({
  filename: './app1.html',
  template: 'src/app1/index.html',
  inject: true,
  chunks: ['app1']
}),
new HtmlWebpackPlugin({
  filename: './app2.html',
  template: './src/app2/index.html',
  inject: true,
  chunks: ['app2']
})

注意,我们此处还可以使用HtmlWebpackPlugin插件分别设置应用的收藏图标(favicon)、页面标题(title)等