Vue创建多页面应用

首先把下面的东西从原来的位置放到一个新的文件夹里。（这里最重要的还是main.js）

这样我就创建了两个页面了。（当然了，要把里面文件的引用位置改下）

接下来就是vue cli3官方给出的多页面配置 ，在vue.config.js里写上这些。（subpage，chunks选项可以没有）

chunks如果有最后的参数必须是你页面的名称（比如我第一个页面是定义的是ui，就要写ui）

注意打包时的公共路径要改下

module.exports = {
  publicPath: './',
  pages: {
    index: {
      // page 的入口
      entry: "src/views/index/main.js",
      // 模板来源
      template: "public/index.html",
      // 在 dist/index.html 的输出
      filename: "index.html",
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 
      title: "Index Page",
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "index"]
    },
    ui: {
      // page 的入口
      entry: "src/views/ui/main.js",
      // 模板来源
      template: "public/ui.html",
      // 在 dist/index.html 的输出
      filename: "ui.html",
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 
      title: "Index Page",
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "ui"]
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: "src/subpage/main.js"
  }
};

还有注意模板来源，网页必须在对应的位置创建个html文件

接下来就是编写代码了

main.js入口文件的写法如下（render渲染这个模板）

App.vue模板写法（以下是我改写的）

可以注意到跳转新页面a标签的href属性  

好了到这里就结束了跳转页面自己动手了。

最后总结一遍

入口文件就是用来渲染模板跟其他vue之类的操作，挂载到html页面的（比如路由。状态管理等）