Multi-page application to construct vue-cli3
The first step: create a vue-cli3 project: vue create app
Then run the project: npm run serve
Now multi-page applications:
First, following the src to create pages of a document, and then as shown, to create such a directory structure, each folder is a corresponding page;
Then said the contents of each file corresponding to all of the files are so routine
index.html
Code:
<!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
Code:
Import View from 'view';
import Ass from './index.vue';
Vue.config.productionTip = false;
new view ({
render: h => h(Ass)
}).$mount('#App')
index.vue
Code:
<template>
<div>
hello page1;
<a href="page2.html"> I want the world </a>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
Then we need to create a file in the root directory of vue.config.js
Code:
let glob = require('glob')
// get the configuration pages multi-page html and js in the current folder
function getEntry(globPath) {
let entries = {}, tmp, htmls = {};
// read src / pages / ** / html files under all
glob.sync(globPath+'html').forEach(function(entry) {
tmp = entry.split('/').splice(-3);
htmls[tmp[1]] = entry
})
// read src / pages / ** / js files under all
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', // current directory has no places common html public / index.html as template
filename: tmp [1] + '.html' // to the folder name as an access address .html
};
});
console.log(entries)
return entries;
}
let htmls = getEntry('./src/pages/**/*.');
module.exports = {
pages:htmls,
publicPath: './', // solve static file path 404 after the packaging issues
outputDir: 'dist', // file after the package folder name, the default dist
devServer: {
open: true, // npm run serve to automatically open the browser
index: '/page1.html' // default start page
}
}
Then we packed instruction: npm run build
We jump way can be achieved by a label
Then we can see the pack case of export documents
