這篇文章是我看視訊後總結的，儘可能的細緻的記錄了下來。
如果有哪裡說的不對或者不全的，大家告訴我，我會及時修改。

demo演示說明

http://localhost:8088/user.index.html#/下有路由http://localhost:8088/user.index.html#/u，可以在這個路由上點選跳到http://localhost:8088/goods.index.html#/;

http://localhost:8088/goods.index.html#/下有路由http://localhost:8088/goods.index.html#/g，可以在這個路由上點選跳到``````http://localhost:8088/user.index.html#/

跳轉通過a標籤的url實現。

VUE多頁應用配置

• 核心思想: 兩個vue單頁專案，同時放在src目錄下，一次webpack打包，跳轉用url
• 所需外掛 webpack-webpack-plugin
  • webpack操作:
    • 1. 多個入口 { main1:’./usermain.js’,main2:’./goodsmain.js’ }
      2. 用多次html外掛

原理：

目錄結構

只做參考，具體以專案目錄為準

webpack.base.conf.js 配置入口

// module.exports中： 
// 相對於專案根目錄的，可以通過node的方式遍歷，這裡現在先寫死
  entry:
 
 {
    user: './src/user/main.js',		// 對應user專案
    goods: './src/goods/main.js'	// 對應goods專案
  },

• 給dist分目錄的話，通過 output

生產環境的配置

webpack.prod.conf.js

每用一次html-webpack-plugin就是對一個vue單頁專案做打包，可以遍歷( 加到plugins裡面去 )，這裡先寫死。

// 對user專案
new HtmlWebpackPlugin({
    filename: 'user.index.html',
    template: path.join(__dirname,
 
 '../src/user/index.html'),
    /* chunks 描述裡面具體的塊
    ** 	manifest 關聯清單，抽第三方包
    **  vendor 第三方庫
    **  filename 自己, 起個名字。入口實際就是entry的key
    */
    chunks: ['manifest', 'vendor', 'user'],
    inject: true,
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
}),
// 對goods專案 
new HtmlWebpackPlugin({
    filename: 'goods.index.html',
    template: path.join(__dirname, '../src/goods/index.html'),
    chunks: ['manifest', 'vendor', 'goods'],
    inject: true,
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
}),

• 注意事項

  // 檔名稱
  filename: filename + '.html',
  // 頁面模板需要加對應的js指令碼，如果不加這行則每個頁面都會引入所有的js指令碼
  chunks: ['manifest', 'vendor' , filename],
  inject: true
  

• 生成的dist目錄結構

  

• getHtmls的思路

  • 更為靈活的讀取各專案下的js檔案（入口） entry:{‘js檔名’:‘js檔案路徑’ }
  • 更為靈活的讀取各專案下的html檔案（首頁.html） plugins:[].concat( [ new HtmlWebpackPlugin(),new HtmlWebpackPlugin() ] )
    • filename屬性是生成的相對dist的檔名 xxx.html
    • template 模板生成的參照物 需要絕對路徑||相對路徑 ‘./xxx.html’
    • chunks:[filename] 指定第三引入的js檔名稱
    • 
      • 這個[name]其實就是entry的key

開發環境的配置

• 同開發環境配置。

生產環境和開發環境配置的合併（可以直接看這裡~~）

• 思路：把外掛配置提出來，放到webpack.base的plugins 裡面

  1. 在build中新建自己的外掛配置 -> myHtmlWabpackPlus.js

     const HtmlWebpackPlugin = require('html-webpack-plugin');
     const path = require('path');
     module.exports = [
         // user專案
         new HtmlWebpackPlugin({
             filename: 'user.index.html',
             template: path.join(__dirname, '../src/user/index.html'),
             /* chunks 描述裡面具體的塊
             ** 	manifest 關聯清單，抽第三方包
             **  vendor 第三方庫
             **  filename 自己, 起個名字
             */
             chunks: ['manifest', 'vendor', 'user'],
             inject: true,
             minify: {
               removeComments: true,
               collapseWhitespace: true,
               removeAttributeQuotes: true
               // more options:
               // https://github.com/kangax/html-minifier#options-quick-reference
             },
             // necessary to consistently work with multiple chunks via CommonsChunkPlugin
             chunksSortMode: 'dependency'
           }),
           // goods專案
           new HtmlWebpackPlugin({
             filename: 'goods.index.html',
             template: path.join(__dirname, '../src/goods/index.html'),
             chunks: ['manifest', 'vendor', 'goods'],
             inject: true,
             minify: {
                 removeComments: true,
                 collapseWhitespace: true,
                 removeAttributeQuotes: true
             },
             chunksSortMode: 'dependency'
         })
     ]
     

  2. webpack.base.js中引入myHtmlWabpackPlus.js

     首先引入

     const myHtmlWabpackPlus = require('./myHtmlWebpackPlus')
     

     在module.exports 中加入

     // 根屬性 plugins:[]
     plugins: myHtmlWabpackPlus
     

     • ***注意：***一定要先刪掉webpack.prod.conf.js和webpack.dev.conf.js中的 new HtmlWebpackPlugin部分

部署:

• 解決 多頁預設顯示哪個頁面為首頁:

  • 開發環境： 有兩種方式

    1. package.json scripts的dev配置--open-page xxx.html如：

       "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open-page user.index.html"

       • 注意順序

    2. 開啟的時候需要在埠號後加上某個頁面的路徑，如：http://localhost:8081/user.index.html#/，否則顯示Cannot GET。

       路徑名稱是dist目錄生成的檔案的名字。

  • 生產環境配置 server(伺服器)節點

    以nginx為例： 開啟nginx.conf

  server {
  	listen       9527;	
  	server_name  localhost;
       location / {
               root   html;
               index  user.index.html user.index.htm;
       }
  }
  

參考： 開課吧塗老師視訊