Vue-cli 2.9 多頁配置及多頁面之間的跳轉問題

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

以上就是這次多頁配置的總結