Vue-cli多页配置及多页面之间的跳转问题

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; }

以上就是这次多页配置的总结