vue-cli3 實現多頁面應用

適用場景

公司有專門的審批系統，我如今作的後臺管理系統須要接入，移動端和PC端都要有一個頁面來展現業務信息。後端不給開倆項目（也確實不必），因此打算用多頁面來解決，PC和移動端放到一個項目裏，而後打包到各自的文件夾。

簡單來講，多頁面也就是適用於有多個小頁面，不至於單獨開多個項目的狀況。

項目結構

項目 src 文件夾結構以下：

打包以後 dist 文件夾結構以下：

修改哪些文件

• 新增 utils 文件夾

utils 文件夾下新增四個文件：

getPages.js      // 用來獲取 pages 文件夾下的文件名稱，vue.config.js 使用
cssCopy.js       // webpack 打包以後各頁面的 css 文件複製到各個文件夾下
jsCopy.js        // webpack 打包以後各頁面的 js 文件複製到各個文件夾下
htmlReplace.js   // 解決打包以後各頁面 html 文件引入的 css、js 文件的路徑問題

getPages 引入到 vue.config.js 使用，其餘三個打包時 node 執行。

"scripts": {
    "dev": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build && node utils/jsCopy.js && node utils/cssCopy.js && node utils/htmlReplace.js",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },

• vue.config.js

爲什麼添加 pages字段可參考 Vue 官方文檔。

+ let  pageMethod  =  require('./utils/getPages.js')
+ let  pages  =  pageMethod.pages()

module.exports  = {
-    // publicPath: './',  // 注意此行，會影響 htmlReplace.js 文件
+    pages
}

注意事項

每一個頁面的.html文件必須不能同名，否則本地開發環境沒法拆分頁面，本地若是想訪問其餘頁面的話，地址以下：http://localhost:8080/order.html。

最好的處理方式是每一個頁面的文件夾名字和.vue名字和.html名字和.js的名字都同樣，這樣打包時容易拆分。

參考

其實這篇文章不算原創，是參考其餘文章寫的，由於原文章真的是太簡陋了....

原文地址：CSDN - lizhen_software
示例倉庫地址：vue-more-pages