設(shè)置好項目目錄
在src目錄下新建一個pages目錄婶恼，每個單頁面的應(yīng)用為一個文件夾铃辖，可以理解為衣厘，多個腳手架結(jié)構(gòu)树酪，單頁面訪問的路徑為ip+文件名.html,例如單頁面應(yīng)用的文件名為page1,那么打包之后訪問的路徑為http://localhost:8080/page1.html
image.png
設(shè)置每個單頁面的目錄架構(gòu)
每個單頁面的目錄可以理解為就是一個架手架目錄，里面包含index.html,index.vue,index.js,如下圖
image.png
index.html文件內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.js為每個但應(yīng)用的入口文件鸟廓，內(nèi)容如下
import Vue from 'vue'
import App from './index.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
index.vue文件內(nèi)容如下
<template>
<div>
page1
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
在項目的根目錄下新建一個vue.config.js文件
image.png
設(shè)置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: './', // 解決打包之后靜態(tài)文件路徑404的問題
outputDir: 'output', // 打包后的文件夾名稱从祝，默認dist
devServer: {
open: true, // npm run serve 自動打開瀏覽器
index: '/page1.html' // 默認啟動頁面
}
}
配置好之后，npm run serve 啟動程序引谜，我們要訪問哪個單應(yīng)用頁面直接訪問文件名牍陌。html即可，例：http://localhost:8080/page1.html
