採用vue-cli+apicloud的方式寫解決以上痛點，開發靈活，並且打包之後體積更小速度更快
cd到專案想要建立的位置，執行：
vue create vue-for-apicloud
複製**
根據自己需求選擇模組（不要router,因為vue-router跳轉頁面的效果相比window和frame相比差太多了），按空格鍵選中，按回車完成選擇：
選擇css預處理器語言，選擇之後可以獲得預處理語言支援：
選擇eslint：
剩下的配置根據自己情況來設定，等待專案建立完成。
專案結構如圖：
專案根目錄下建立vue.config.js
const pages = require('./build/pages')
module.exports =
複製**
const glob = require('glob')
// 迴圈獲取檔案並打包
console.log('獲取頁面檔案中...')
// 讀取src/views下所有main.js,可根據自己的情況更改
const files = glob.sync('**/views/**/main.js')
const pages = {}
files.foreach(item => frame`
} pages[page] = item
})console.log('檔案獲取結束')
module.exports = pages
複製**
npm run build
複製**
npm run serve
複製**
如果你用的是webstrom可把這兩個命令配置成執行命令，參考:blog.csdn.net/q649381130/…根據上面的配置，實際打包的專案應該是如下結構：
根據自己的需求建立資料夾，資料夾名稱即為頁面名稱，如果資料夾下面有frame資料夾，則frame為資料夾下的檔案打包後為資料夾名稱+frame.html
import vue from 'vue'
window.apiready=function
() ,
bounces: true,
overscrollmode: 'scrolls'
})}複製**
methods: .html`,
bgcolor: '#fff'})}
}複製**
生產環境下將專案打包，將打包之後的檔案拷貝到apicloud專案html資料夾下（根據自己習慣），路勁改為apicloud專案路徑即可。
需要注意的是apicloud studio無法外部拷貝到專案資料夾下，只能開啟本地資料夾替換檔案，每次替換完成之後，需要重啟apicloud studio或者重新新增專案資料夾。不得不說這真是乙個讓人很難受的事情，apicloud studio並沒有重新整理專案或者資料夾的選項。apicloud的模組載入最好放在main.js中的window.apiready方法中
apicloud studio無法外部拷貝到專案資料夾下，只能開啟本地資料夾替換檔案，每次替換完成之後，需要重啟apicloud studio或者重新新增專案資料夾
以上流程已經在正式專案中實踐
使用Vue CLI3開發多頁面應用
一 安裝vue cli3 1 如果你已經全域性安裝了舊版本的vue cli 1.x 或 2.x 你需要先通過npm uninstall vue cli g或yarn global remove vue cli解除安裝它。2 安裝命令 npm install g vue cli 或 yarn glob...
vue cli3 建立多頁面應用
改變後的目錄結構 修改main.js的檔案引用位址 import vue from vue import router from router import store from store vue.config.productiontip false new vue mobile 當使用只有入口的...
乙個基於vueCli3的移動端多頁面腳手架
基於vue cli3.0 webpack 4.28.4的多頁腳手架 線上demo 編譯速度與熱跟新速度要優於webpack2.0 3.0，但相應的消耗記憶體變大，在node 現記憶體溢位現象，如頁面過多，使用 npm run fix memory limit再進行 npm run devnpm in...