vue 的多页面应用

　　vue-cli3 中构建多页面的应用

　　第一步：先创建一个 vue-cli3 的项目：vue create app

　　然后运行项目：npm run serve

　　现在开始多页面的应用：

　　首先在 src 的目录下面，创建一个 pages 的文件，然后如图，创建这样的目录结构，每一个文件夹，对应的是一个页面；

　　接下来说每个文件所对应的内容，所有的文件都是这样的套路

　　　　index.html

　　　　代码：

　　　　　　<!DOCTYPE html>

　　　　　　<html>

　　　　　　　　<head>

　　　　　　　　　　 <title>Document</title>

　　　　　　　　</head>

　　　　　　　　<body>

　　　　　　　　　　 </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

　　　　代码：　　

　　　　　　　　<div>

　　　　　　　　　　hello page1;

　　　　　　　　　　 <a href="page2.html">我要走向世界</a>

　　　　　　　　 </div>

　　　　　　</template>

　　　　　　　　export default {

　　　　　　　　}

　　　　　　</script>

　　　　　　</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 标签来实现了

　　然后我们可以看到出口文件的打包情况

巴特西

vue 的多页面应用

最新文章

热门文章