vue-cli3.0配置多页面应用

首先我们创建vue.config.js,这个是配置项，在其中输入以下代码

module.exports = {
  pages: {
    index: {
      // 页面的入口文件
      entry: 'src/index/main.js',
      // 页面的模板文件
      template: 'src/index/index.html',
      // build 生成的文件名称  例： dist/index.html
      filename: 'index.html'
    },
    // template 默认会去找 public/subpage.html 页面，如果找不到会使用 public/index.html 文件

    personal:{
      entry: "src/personal/main.js",
      template: "src/personal/index.html",
      filename: "personal.html"
    },
    file:{
      entry: "src/file/main.js",
      template: "src/file/file.html",
      filename: "file.html"
    },
  },
}

这时候注意html文件写法，推荐直接把模板文件复制过来

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon shortcut" href="/favicon.png">
    <title>**********</title>

  </head>
  <body>

    <div id="app"></div>

  </body>


</html>

　　多页面应用无法使用vuex传值，本人使用的是本地存储进行值的传递，当然在每个单页面中还是和之前的方法一样，

多页面的跳转

window.location.href=`pay.html` 

携带参数跳转

window.location.href=`pay.html?price=${a.price}&orderSn=${a.orderSn}`