vue脚手架创建的项目都是单页面应用
但是有一些场景下我们需要使用多页面应用（比如一个系统的后端和前端要分为不同的页面应用，或者同一个服务器下的不用的项目）
网上也找了一些资料，自己配置了下，目前来说是成功的
配置如下：
在vue.config.js中添加
pages: {
index: {
// page 的入口
entry: 'src/modules/mobile/main.js',
// 模板来源就是在public里面创建的入口文件名
template: 'public/index.html',
// 编译后在 dist文件夹中的输出文件名，可选项，省略时默认与模块名一致
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要时 <title><%= htmlWebpackPlugin.options.title %></title>
title: '项目标题',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，也就是只有entry属性时，直接用字符串表示模块入口
elive: 'src/modules/elive/elive.js'
}
如有了解详细请去cli3官网配置文件里面查询
项目目录是这样
image.png
而且项目中的public目录要新建这样多页面elive.html,图片和内容如下：
image.png
elive.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, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="elive"></div>
</body>
</html>
至于多页面中的elive入口文件配置代码和目录：
elive.js
import Vue from 'vue'
import Elive from './Elive.vue'
import router from './router'
import store from './store'
import http from '../elive/http/http'
import VueAweSomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import VueLazyload from 'vue-lazyload'
Vue.prototype.$http = http
Vue.config.productionTip = false
Vue.use(require('vue-wechat-title'))
Vue.use(VueAweSomeSwiper)
Vue.use(VueLazyload, {
preLoad: 1.3,
// error: 'dist/error.png',
loading: require('./assets/img/load.gif'),
attempt: 1
})
new Vue({
router,
store,
render: h => h(Elive)
}).$mount('#elive')
image.png
上图的mobile就是vue单页应用的配置，elive其实跟mobile配置一样，只是需要修改elive绑定的组件更换就好了，如下：
main.js
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
elive.js
new Vue({
router,
store,
render: h => h(Elive)
}).$mount('#elive')
最后对多页的标题做添加
vue ui进行安装v-wechat-title依赖
配置代码如下
elive.js
Vue.use(require('vue-wechat-title'))
elive.vue
<!-- 一直播 -->
<template>
<div id="elive" v-wechat-title="$route.meta.title">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'elive',
data () {
return {
}
},
created () {
// 获取手机dpr分辨率
// let a = window.devicePixelRatio
// console.log(a)
let idealViewWidth = window.screen.width
const BASICVALUE = 375
document.documentElement.style.fontSize = (idealViewWidth / BASICVALUE) * 100 + 'px'
},
mounted () {},
components: {},
computed: {},
methods: {}
}
</script>
<style lang='scss'>
html, body{
margin: 0px;
padding: 0px;
}
ul li, ol li, li{
list-style: none;
}
p {
display: block;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
</style>
这样运行之后,想查看页面
npm run serve
进行访问
localhost:8080是访问的mobile下面的项目，
localhost:8080/elive.html#/是访问的elive下面的项目，
至此，多页面项目配置成功
不懂的，可以下面留言
持续更新~~~~
网友评论