最近由于工作需要,需要自己搭建一套vue多页面的前端应用框架,以前都是用现成的,不过这套现成的框架,集成了太多的冗余的插件,而且不能直接通过指令‘npm run dev’实现热加载,需要通过虚拟服务器linux系统运行watch指令,比较麻烦,而且针对不用开发环境,有可能运行不了,所以这样的一套框架再运用到新的项目中感觉会降低工作效率。
这次借助新项目的开展,就自己动手研究了一天,在vue-cli脚手架创建框架的基础上进行webpack配置项的调整,配置出了一套可以开展多页面跳转的应用框架。废话不多说了,进入正题。
首先,第一步执行脚手架指令 vue init webpack vue-multipage-webapp,创建项目 vue-multipage-webapp,按照官网的标准步骤进行下去,直到可运行项目。项目结构目录为:
其次就是修改webpack,打开文件夹build
对webpack.base.conf.js进行如下配置:
页面入口entry配置,app和home属性在下面的配置中会作为每个页面的引用的js用到,为了便于大家操作使用,贴上源码:
entry: {
app: './src/main.js', //index页面入口
home: './src/common/js/home.js' //新页面入口
}
接下来是对webpack.dev.conf.js进行配置调整:
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
chunks:['manifest','vendor','app'], //此处配置不可遗漏
}),
new HtmlWebpackPlugin({
filename: 'home.html', //打包和调用的新页面的名称
template: './src/pages/home/index.html', //新页面引入路径(此处的路径一定要配置正确,否则会出错)
inject: true,
chunks:['manifest','vendor','home'], //此处chunks配置注意manifest,vendor别遗漏(webpack中若有配置这两项,则必须加上,否则打包运行的项目代码跳转到对应页面中控制台会出现报错:webpackJsonp is not defined)
}),
以上chunks的参数值就是上面说明的入口文件中特别提到的参数属性
最后,webpack.pro.conf.js的配置调整:
//主页index.html
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
chunks:['manifest','vendor','app'], //此处配置不可遗漏
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
//home.html配置
new HtmlWebpackPlugin({
filename: config.build.home, //文件夹config中的index.js进行设置
template: 'src/pages/home/index.html',
inject: true,
chunks:['manifest','vendor','home'], //此处配置不可遗漏
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
通过以上配置,如果没有其他出入的话,新页面应该可以和index.html相同调用了,即:http://localhost:8080/home.html,在项目正常运行的情况下,该页面配置成功,再配置其他页面和上面操作类似即可。
项目代码的结构未作详细说明,只是将需要配置的点罗列了下,有兴趣了解全部源码内容可以下载:源码地址
源码下载后先浏览下readme,里面还有axios封装,以及如何调用。算是给大家的彩蛋了,哈哈!