设置好项目目录
在src目录下新建一个pages目录，每个单页面的应用为一个文件夹，可以理解为，多个脚手架结构，单页面访问的路径为ip+文件名.html,例如单页面应用的文件名为page1,那么打包之后访问的路径为http://localhost:8080/page1.html
image.png
设置每个单页面的目录架构
每个单页面的目录可以理解为就是一个架手架目录，里面包含index.html,index.vue,index.js,如下图
image.png
index.html文件内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
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>
page1
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
在项目的根目录下新建一个vue.config.js文件
image.png
设置config文件的配置项
let glob = require('glob')
//配置pages多页面获取当前文件夹下的html和js
function getEntry(globPath) {
let entries = {}, tmp, htmls = {};
// 读取src/pages/**/底下所有的html文件
glob.sync(globPath+'html').forEach(function(entry) {
tmp = entry.split('/').splice(-3);
htmls[tmp[1]] = entry
})
// 读取src/pages/**/底下所有的js文件
glob.sync(globPath+'js').forEach(function(entry) {
tmp = entry.split('/').splice(-3);
entries[tmp[1]] = {
entry,
template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html', // 当前目录没有有html则以共用的public/index.html作为模板
filename:tmp[1] + '.html' // 以文件夹名称.html作为访问地址
};
});
console.log(entries)
return entries;
}
let htmls = getEntry('./src/pages/**/*.');
module.exports = {
pages:htmls,
publicPath: './', // 解决打包之后静态文件路径404的问题
outputDir: 'output', // 打包后的文件夹名称，默认dist
devServer: {
open: true, // npm run serve 自动打开浏览器
index: '/page1.html' // 默认启动页面
}
}
配置好之后，npm run serve 启动程序，我们要访问哪个单应用页面直接访问文件名。html即可，例：http://localhost:8080/page1.html
