多页应用场景：
1 混合app中，页面的转场效果会比css模拟的性能好，尤其在低端安卓机中。
2 多页应用方便部署和调试
1 mpa 多页 方案一
使用vue cli 3 创建默认模板，
安装vuel cli:
npm install -g @vue/cli
使用vue cli创建项目:
vue create vuecli3
选择默认即可
项目根目录创建 vue.config.js :
const glob = require('glob')
console.log('获取页面文件中...')
const files = glob.sync('src/views/**/*.js')
let pages = {}
files.forEach(item => {
const items = item.match(/src\/views\/(.*)\.js/);
if (items.length != 2) throw new Error('Sync Error');
let name = items[1].replace('/','_');
pages[name] = {
entry:items[0],
template:'public/index.html',
filename:name+'.html'
}
})
console.log('文件获取结束')
console.log(pages)
module.exports = {
publicPath: './',
pages: pages,
productionSourceMap: false // 是否生成sourceMap文件
}
index.js:
import Vue from 'vue'
import App from './index.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
index.vue:
<template>
<div id="app">
hello index.html
<a href="/my_order.html">order</a>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
前台访问url：
http://localhost:8080/index.html
http://localhost:8080/my_order.html
2 mpa 多页方案二
方案一中每个页面都一个xxxx.js，这个内容基本都相似，方案二就是把这个js隐藏掉
vue create vuecli4
选择默认即可
项目根目录创建 vue.config.js :
const glob = require('glob')
console.log('获取页面文件中...')
const files = glob.sync('src/views/**/*.vue')
let pages = {}
files.forEach(item => {
const items = item.match(/src\/views\/(.*)\.vue/);
if (items.length != 2) throw new Error('Sync Error');
let name = items[1].replace('/','_');//为了兼容二级（多级）目录
pages[name] = {
entry:items[0],
template:'src/index.html',
title:name,
filename:name+'.html'
}
})
console.log('文件获取结束')
console.log(pages)
module.exports = {
publicPath:'/',
pages: pages,
productionSourceMap: false // 是否生成sourceMap文件
}
index.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" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.name %></title>
<script type="text/javascript" src="./libs/vue.min.js"></script>
<script type="text/javascript" src="./libs/fastclick.min.js"></script>
</head>
<body>
<div id="page">
<vue></vue>
</div>
</body>
<script type="text/javascript">
var page= new Vue({
el: '#page',
components: {'vue': vm},
mounted: function () {
Origami.fastclick(document.body) // You must use fastclick on the mobile
}
})
</script>
</html>
index.vue:
<template>
<div id="app">
index.vue<br>
<a href="/my_order.html">order</a>
</div>
</template>
<script>
window.vm = {
name: "app",
};
export default window.vm;
</script>
http://localhost:8080/index.html
http://localhost:8080/my_order.html
遗留问题：
vue cli，二级（多级）目录访问，如上面不能直接 /my/order.html访问，order.js会找不到，但是打包可以输出到二级目录，所以为了兼容二级目录/转成_处理。
这个是vue的问题，多也入口只支持一级，目前尚未解决
网友评论