首先我们创建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}`