一般情况下,构建一个vue项目的步骤为:
1,安装nodejs环境
2,安装vue-cli
cnpm install vue-cli -g
3,构建vue项目
vue init webpack-simple vue-cli-multipage-demo
4, 安装项目依赖包
cnpm install
5,在开发环境下运行该项目:
npm run dev
通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,接下来的工作就是填代码了。
最近在做一个前端代码重构的时候发现一个问题,使用这个脚手架构建的项目满足不了我的需求,其实这个需求有一点违背我们vue的初衷的,vue开发的是单页面应用(SPA),这里我需要他实现多页面的效果。什么意思呢?举个例子:我们在网页开发的时候,有时候点击一个连接,浏览器会新代开一个tab页来显示我们的内容,这个时候其实就出现多页面的情况了,新开的这个页面其实已经不属于我们之前的那个页面,(SPA)其实是通过路由的方式,让多个页面在主页面中显示。但是这个时候新开的页面已经脱离主页面了。
通过vue-cli脚手架构建的项目的webpack配置文件支持单页面的应用开发,他只有一个入口文件。而且最后只会生产一个页面。如何才能满足我的需求,让webpack同时便于多个页面呢,其实还是比较简单的,只需要将webpack稍微改装一下,就完全可以了。
首先我们需要在build文件下的utils.js文件家中增加一个获取文件夹中文件路径的方法,这个方法将目标文件解析成对象的形式。
utils.js
var glob = require("glob");//分析文件夹中文件路径的第三方模块
exports.getEntry = function(globPath) {
var entries = {},
basename, tmp, pathname;
if (typeof (globPath) != "object") {
globPath = [globPath]
}
globPath.forEach((itemPath) => {
glob.sync(itemPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
if (entry.split('/').length > 4) {
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
entries[pathname] = entry;
} else {
entries[basename] = entry;
}
});
});
return<