glob.sync(globPath+'ts').forEach(function(entry) {
tmp = entry.split('/').splice(-3);
entries[tmp[1]] = {
entry,
// 当前目录没有有html则以共用的public/index.html作为模板
template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html',
// 以文件夹名称.html作为访问地址
filename:tmp[1] + '.html'
};
});
return entries;
};
let htmls = getEntry('./src/views/**/*.');
module.exports = {
pages:htmls,
publicPath: './', // 解决打包之后静态文件路径404的问题
outputDir: 'output', // 打包后的文件夹名称，默认dist
devServer: {
open: true, // npm run serve 自动打开浏览器
index: '/index.html' // 默认启动页面
},
productionSourceMap: false
};
创建好vue.config.js之后，删除App.vue和main.ts(main.js)文件，并在views文件夹下创建两个新的文件夹index和about，可以使用其他名称。这里的文件夹用来分散多个页面内容。
在index文件夹下面创建index.html、index.vue、main.ts，about文件也是如此。
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" rel="external nofollow" >
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
index.vue
<template>
<div id="app">
<a href="about.html" rel="external nofollow" rel="external nofollow" >About</a>
<h1>Index</h1>
</div>
</template><script>
export default {
name: 'page2'
}
</script>
<style>
</style>
main.ts
import Vue from 'vue'
import App from './index.vue'Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
仔细看代码代码貌似与之前的单页面应用并没有任何区别，但是有一点需要注意的是，一旦需要跳转到另一个页面的时候，需要使用a标签进行跳转<a href=”about.html” rel=”external nofollow” rel=”external nofollow” >About</a>。
