使用 Vue Cli 实现多页应用

Jun 07, 2020Vue点击

如何在 Vue Cli 下实现多入口的 Web App

快速配置

Cli 创建了一个 Vue 项目之后

可以通过 vue.config.js 对项目进行配置

在 vue.config.js 里增加一个叫 pages 的项

1
2
3
4
5
6
module.exports = {
  pages: {
    index: 'src/main.js',
    another: 'src/another/main.js'
  }
}

上述代码中，除了默认就有的 src/main.js 入口文件，我们又增加了 another/main.js 入口文件

这就是实现多页应用最简单的配置方式了

当然，我们可以组织一下项目结构，将不同的页面归入 src/pages 的目录下，以便维护以后可能出现的更多的 pages

1
2
3
4
5
6
module.exports = {
  pages: {
    index: 'src/pages/index/main.js', // 文件中的引用路径也要有相应的修改
    another: 'src/apges/another/main.js'
  }
}

配置细节

上面的方式只是简单的配置了一下不同的入口 js 文件的路径

除此之外，还可以对每个入口的细节进行配置，比如：模板来源、输出名称、title、页面中包含的块

如 Vue Cli 文档里的示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

运行项目

将项目在本地跑起来之后，默认的根路径是指向了 index 这个入口

想要去到其他入口的话，可以将浏览器中的地址改为对应入口的 html

比如： localhost:3001/another.html

原文作者: dgb8901,yinxing

原文链接: https://www.itwork.club/2020/06/07/vue-multi-page-app/

版权声明: 转载请注明出处

Vue

为您推荐

体验小程序「简易记账」

关注公众号「特想学英语」

Dart 环境搭建