vue-cli3 中構建多頁面的應用
第一步：先創建一個 vue-cli3 的項目：vue create app
然后運行項目：npm run serve
現在開始多頁面的應用：
首先在 src 的目錄下面，創建一個 pages 的文件，然后如圖，創建這樣的目錄結構，每一個文件夾，對應的是一個頁面；
接下來說每個文件所對應的內容，所有的文件都是這樣的套路
index.html
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="App">
</div>
</body>
</html>
index.js
代碼：
import Vue from 'vue';
import Ass from './index.vue';
Vue.config.productionTip = false;
new Vue({
render: h => h(Ass)
}).$mount('#App')
index.vue
代碼：
<template>
<div>
hello page1;
<a href="page2.html">我要走向世界</a>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
然后我們需要在跟目錄下創建一個 vue.config.js 的文件
代碼：
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: 'dist', // 打包后的文件夾名稱，默認dist
devServer: {
open: true, // npm run serve 自動打開瀏覽器
index: '/page1.html' // 默認啟動頁面
}
}
然后我們打包指令：npm run build
我們跳轉的方式就可以通過 a 標簽來實現了
然后我們可以看到出口文件的打包情況
