vue多頁面 項目架構整理

前端ui

• iView 官網
  一套基於 Vue.js 的高質量 UI 組件庫
• elementUi

管理系統框架

• iview-admin github

移動端ui

• VUX 官網
  VUX 必須配合 vux-loader 使用，若是不使用 vux2 模板請按照文檔正確配置。
  less@3.x 有嚴重的兼容問題，請暫時使用 less@^2.7.3。
  暫未適配 vue-cli@3.x，請知悉。

vue2.0 多頁面系統

// 項目結構
.
|-- README.md
|-- build
|   |-- build-test.js
|   |-- build.js
|   |-- check-versions.js
|   |-- dev-client.js
|   |-- dev-server.js
|   |-- utils.js
|   |-- vue-loader.conf.js
|   |-- webpack.base.conf.js
|   |-- webpack.dev.conf.js
|   |-- webpack.prod.conf.js
|   `-- webpack.test.conf.js
|-- config
|   |-- dev.env.js
|   |-- index.js
|   |-- prod.env.js
|   `-- test.env.js
|-- favicon.ico
|-- index.html
|-- package-lock.json
|-- package.json
|-- src
|   |-- assets
|   |-- components
|   |-- frame
|   |-- service
|   |-- views
|   `-- vuexStore
|-- static
|   |-- desktop.ini
|   |-- test
|   `-- utf8-jsp
|-- test
|   |-- e2e
|   `-- unit
|-- yarn.lock
`-- yarn.lock.bak

對比多頁應用和單頁應用（SPA）,最大的不一樣點，就在於入口的不一樣

• 多頁：最終打包生成多個入口（ html 頁面），通常每一個入口文件除了要引入公共的靜態文件（ js/css ）還要另外引入頁面特有的靜態資源
• 單頁：只有一個入口( index.html )，頁面中須要引入打包後的全部靜態文件，全部的頁面內容全由 JavaScript 控制

webpack

• 指定打包模式，可選的值有：

  1. development，開發模式

     • 會將 process.env.NODE_ENV 設置成 development
     • 啓用 NamedChunksPlugin、NamedModulesPlugin 插件

  2. production，生產模式

     • 會將 process.env.NODE_ENV 設置成 production
     • 會啓用最大化的優化（模塊的壓縮、串聯等）
  3. none，這種模式不會進行優化處理

• 在這裏配置的 entry 實際上是須要被 html 引入的js模塊，這些js模塊、連同抽離的公共js模塊最終還須要利用 html-webpack-plugin 這個插件組合到html文件中：

// \build\webpack.base.conf.js
// 目的是獲取單頁面的main.js

var entries = utils.getMultiEntry('./src/views/**/**/*.js'); // 得到入口js文件

entries['preJs'] = './src/assets/js/pre.js'                 //爲index.html引入preJs.js
entries = Object.assign({'babel-polyfill':'babel-polyfill'},entries)

var webpackConfig = {
  entry: entries
}

// \build\webpack.dev.conf.js
// 須要在module.exports裏使用'html-webpack-plugin'配置plugins

var pages = utils.getMultiEntry('./src/views/**/**/*.html');

for (let pathname in pages) {
  // 配置生成的html文件，定義路徑等
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname], // 模板路徑
    chunks: ['preJs',pathname, 'vendors', 'manifest'], // 每一個html引用的js模塊
    chunksSortMode: function (chunk1, chunk2) {
      var order = ['preJs','vendors', pathname, 'manifest'];
      var order1 = order.indexOf(chunk1.names[0]);
      var order2 = order.indexOf(chunk2.names[0]);
      return order1 - order2;  
    },
    inject: true // js插入位置
  };
  // 須要生成幾個html文件，就配置幾個HtmlWebpackPlugin對象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

chunks的做用是每次編譯、運行時每個入口都會對應一個entry，若是沒寫則引入全部頁面的資源

• 以後就對run build也就是編譯環境進行配置。打開configindex.js文件，在build里加入頁面對應的路徑
• 打開/build/webpack.prod/conf.js文件，在plugins中添加HTMLWebpackPlugin

//構建生成多頁面的HtmlWebpackPlugin配置，主要是循環生成
var pages =  utils.getMultiEntry('./src/views/**/**/*.html');
for (let pathname in pages) {
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname], // 模板路徑
    chunks: ['preJs','vendor',pathname], // 每一個html引用的js模塊
    chunksSortMode: function (chunk1, chunk2) {
      var order = ['preJs','vendor',pathname];
      var order1 = order.indexOf(chunk1.names[0]);
      var order2 = order.indexOf(chunk2.names[0]);
      return order1 - order2;  
    },
    inject: true,              // js插入位置
      hash:true
  };

  webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

其中filename引用的是configindex.js裏的build，每一個頁面都要配置一個chunks，否則會加載全部頁面的資源。

---

參考連接

vue2.0之多頁面的開發
基於 webpack4 搭建 vue二、vuex 多頁應用框架 - 掘金
vue多頁面開發和打包的正確姿式 - 掘金