vue开发,现在大部分做的都是(SPA)应用,但是,由于,需求不同,我们针对的用户需求变更较为,频繁,如果每次都全量打包更新,给开发的自测,及测试妹子的任务就会多,每次都要重新验证一下才放心。所以,想着能不能搞一个多页的,进行增量升级,所以就有了以下的配置。网上配置很多,也很详细,我也有参考。废话不多说开始吧!如果有说的不对的,请大家指出,我会及时改正。
一 目录结构调整
修改之后目录
二,配置文件修改
修改文件utils.js添加以下
// glob是webpack安装时依赖的一个第三方模块,还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件 var glob = require('glob') // 页面模板 var HtmlWebpackPlugin = require('html-webpack-plugin') // 取得相应的页面路径,因为之前的配置,所以是src文件夹下的pages文件夹 var PAGE_PATH = path.resolve(__dirname, '../src/pages') // 用于做相应的merge处理 var merge = require('webpack-merge') //多入口配置 // 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件,如果该文件存在 // 那么就作为入口处理 exports.entries = function() { var entryFiles = glob.sync(PAGE_PATH + '/*/*.js') var map = {} entryFiles.forEach((filePath) => { var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) map[filename] = filePath }) return map } //多页面输出配置 // 与上面的多页面入口配置相同,读取pages文件夹下的对应的html后缀文件,然后放入数组中 exports.htmlPlugin = function() { let entryHtml = glob.sync(PAGE_PATH + '/*/*.html') let arr = [] entryHtml.forEach((filePath) => { let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) let conf = { // 模板来源 template: filePath, // 文件名称 filename: filename + '.html', // 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本 chunks: ['manifest', 'vendor', filename], inject: true } if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }) } arr.push(new HtmlWebpackPlugin(conf)) }) return arr }
修改build/webpack.base.conf.js的入口配置
开发环境build/webpack.dev.conf.js 注释 newHtmlWebpackPlugin…… 在最后添加concat(utils.htmlPlugin())
生产环境webpack.prod.conf.js 注释 newHtmlWebpackPlugin…… 在最后添加concat(utils.htmlPlugin())
三 完成测试
在http://localhost:8083/test.html (注:/test.html 不是 /#/test.html)
就可以看到你想要的结果了。以上,就是多页的配置,网上有好多,我只是做了一下笔记。
接下来,写下页面,页面之间的跳转
如上图。我们配置后,其实不难看出,只是多了出口和入口并不能,用统一一个router搞定页面之前的跳转,所以,我这边,用的是单页,即同一入口出口,文件我们用router,页面与页面之间(即 indtx.html与test.htms)的跳转,用location.href
window.location.href = '/test.html'
配置完后,上传打包,我们会发现,跳转并不是我们想想中的那样,他的根目录不同了需要我们做一点处理,这里我想到了两个方案
方案一: 配置地址根目录
即,在每一个入口文件.js里加上一个公共的变量,挂在vue上当然,你也可以挂到window上。
/* 定义不同入口,跳转路径配置 index.js*/ if (location.hostname === 'localhost') { Vue.prototype.HTTPLOCAT = '' } else { const http = window.location.protocol + '//' + location.hostname + ':' + location.port Vue.prototype.HTTPLOCAT = http + '/netopenws/wt/vue/dist' // (这个路径改为你服务器的路径) }
接下来页面的跳转用就好了。
window.location.href = this.HTTPLOCAT + '/test.html'
方案二: nginx代理转发
nginx代理转发也不麻烦,只是在我们跳转里,前面加上固定的文件名,在nginx进行,代理一下即可。
/* 定义不同入口,跳转路径配置 index.js*/ if (location.hostname === 'localhost') { Vue.prototype.HTTPLOCAT = '' } else { Vue.prototype.HTTPLOCAT = '/dist' // (这个路径改为你服务器访问路径) }
//页面的跳转
window.location.href = this.HTTPLOCAT + '/test.html'
对应的ngnix 代理
location /dist {
root usr/local/dist;
}
以上就是这次多页配置的总结