vue項目添加多頁面配置

公司使用vue-cli建立的vue項目在初始化時並無作多頁面配置，隨着需求的不斷增長，發現有必要使用多頁面配置。看了不少vue多頁面配置的文章，基本都是在初始化時就配置了多頁面。並且若是使用這些實現，須要調整當前項目的目錄結構，這點也是不能接受的。
最後，參考這些文章，在不調整當前項目目錄結構實現了多頁面的配置的添加。這裏作下記錄、總結，方便之後複用。若是還能有幸幫助到有一樣需求的童鞋的話，那就更好了。

實現步驟

1. 添加新增入口相關文件;
2. 使用變量維護多入口；
3. 開發環境讀取多入口配置；
4. 生產環境讀取多入口配置；

新增入口相關文件

在src目錄下新增一個page1文件夾，新建新頁面的所需的相關文件(入口文件、HTML模板文件等)。我這邊直接vue-cli初始化建立相關文件複製了一份到page1文件夾下。以下：

├─App.vue
├─main.js
├─page1.html // 這裏模板文件名稱須要與文件夾名稱相同，方便輸出模板讀取
├─router
|   └index.js
├─components
|     └HelloWorld.vue
├─assets
|   └logo.png

page1/router/index.js須要對該頁面的全部路由添加同文件夾名的公共路徑，用於解析：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/page1/components/HelloWorld' // 這裏也須要留意
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: '/',
  routes: [
    {
      path: '/page1/',
      redirect: '/page1/index'
    },
    {
      path: '/page1/index',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

使用變量維護多入口

咱們在項目目錄下的build/utils.js的最後exports一個指定多入口的對象。以下：

// 這裏，每一個屬性就是一個頁面配置，指定該頁面的入口文件
// 若是須要添加，只需多增長一個屬性
// 屬性名必和html模板文件名、目錄名稱相同
exports.multipleEntrys = {
  page1: './src/page1/main.js'
}

之因此使用build/utils.js，是由於該文件在webpack.base.conf.js、webpack.prod.conf.js、webpack.dev.conf.js都用導入。

開發環境讀取多入口配置

首先，在build/webpack.base.conf.js中，咱們把上面定義的入口添加進entry配置：

entry: {
    app: './src/main.js',
    ...utils.multipleEntrys  // entry添加該行
  }

而後，在build/webpack.dev.conf.js添加路徑解析和多頁面輸出：

// 添加解析，將historyApiFallback的屬性修改以下：
    historyApiFallback: {
      rewrites: [
        // 將全部多入口遍歷成路徑解析項
        ...((()=>{
          let writes = []
          for(let prop in utils.multipleEntrys){
            // 使用屬性名匹配爲正則
            // 這就是上面「須要對該頁面的全部路由添加同文件夾名的公共路徑」的緣由
            let reg = new RegExp(`^/${prop}/`) 
            writes.push({
              from: reg,
              // 使用屬性名讀取模板文件
              // 這就是上面「模板文件名稱須要與文件夾名稱相同」的緣由
              to: path.posix.join(config.dev.assetsPublicPath, `${prop}.html`)
            })
          }
          return writes
        })()),
        // 匹配全部路徑必定要在最後，不然該匹配以後的項，不會被執行
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') } 
      ],
    }

// 在已經的HtmlWebpackPlugin中添加chunks配置，不然默認頁面會注入全部頁面的js文件
...
plugins: [
    ...
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      // 增長此行，
      // 'app'爲默認入口名稱，若是你的默認入口不是'app'
      // 則這裏須要替換
      chunks: ['manifest', 'vendor', 'app']
    })
    ...
]
...
// 在`devWebpackConfig`定義以後，緊接着添加多頁面輸出：
for(let prop in utils.multipleEntrys){
  devWebpackConfig.plugins.push(new HtmlWebpackPlugin({
    filename: `${prop}.html`,
    // html模板路徑,使用屬性名做爲文件夾名稱
    // 這是新頁面文件夾名稱須要和多入口配置變量屬性名相同的緣由
    template: `./src/${prop}/${prop}.html`, 
    inject: true,
    chunks: ['manifest', 'vendor', prop],
  }))
}

最後，添加多頁面相互跳轉連接：

<!-- src/components/HelloWorld.vue -->
...
<a href="/page1/index" >to page B</a> 
...

<!-- src/page1/components/HelloWorld.vue -->
...
<a href="/" >to page A</a> 
...
<!-- 這裏因爲是多個頁面的跳轉，因此不能再使用router-link標籤，須要使用a標籤 -->

到這裏，開發環境的多頁面配置已經完成，從新npm run dev一下，便可多頁面跳轉。

生產環境讀取多入口配置

首先，在webapck.prod.config.js中添加多頁面輸出。

// 在已經的HtmlWebpackPlugin中添加chunks配置，不然默認頁面會注入全部頁面的js文件
...
plugins: [
    ...
    new HtmlWebpackPlugin({
      ...
      chunks: ['manifest', 'vendor', 'app'] // 增長此行
      ...
    })
    ...
]
...
// build/webapck.prod.config.js的webpackConfig定義後緊接着添加
for(let prop in utils.multipleEntrys){
  webpackConfig.plugins.push(new HtmlWebpackPlugin({
    filename: `${prop}.html`,
    template: `./src/${prop}/${prop}.html`,
    inject: true,
    chunks: ['manifest', 'vendor', prop],
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
  }))
}

而後，開發環境不一樣路徑指向不一樣輸出文件是由historyApiFallback來處理的，生產就須要在web服務中將不一樣路徑指向打包後的不一樣文件。這裏以nginx爲例，配置以下：

server {
    listen       92 default_server;
    listen       [::]:92 default_server;
    server_name  _;
    root         D:\vue-multi-entry\dist;


   location / {
            try_files $uri $uri/ /index.html;
    }

    location /page1/ {
            try_files $uri $uri/ /page1.html;
    }
}

以上，整個多頁面的配置就已經完成。這裏是完整demo

關於webpack4.x版本的差別

若是你使用的是webpack4.x版本，關於webapck.prod.config.js中chunks配置的順序就是這樣的：[prop, 'manifest', 'vendor']。