使用vue-cli3多頁面開發apicloud應用

apicloud的開發方式太古老了，官方出的那個cli也不咋地，分享一下基於vue-cli3開發apicloud的方式。

由於apicloud裏面有window和frame的概念,因此確定是多頁面才能發揮出apicloud的優點。

不熟悉vue-cli3的，建議先看下文檔

建立項目

vue create vue-for-apicloud
複製代碼

而後選擇 Manually select features

功能根據本身的喜愛選,不要選Router,由於vue-router跳轉頁面的效果相比window和frame相比差太多了

當前結構如圖

在根目錄建立一個vue.config.js,代碼以下

publicPath必定要使用相對路徑, pages就是咱們的多頁面設置, 由於是app因此不須要SourceMap

const pages = require('./build/pages')

module.exports = {
  publicPath: './',
  pages: pages,
  productionSourceMap: false // 是否生成sourceMap文件
}

複製代碼

在根目錄新建build文件夾,在build裏面新建一個pages.js,代碼以下

這裏面的代碼就是遍歷頁面文件而後再給文件指定文件名稱

const glob = require('glob')

console.log('獲取頁面文件中...')
const files = glob.sync('**/views/**/main.js')
const pages = {}
files.forEach(item => {
  const items = item.split('/')
  let page = items[items.length - 2]
  const pageParent = items[items.length - 3]
  if (page === 'frame') {
    page = `${pageParent}Frame`
  }
  pages[page] = item
})
console.log('文件獲取結束')

module.exports = pages

複製代碼

當前目錄結構如圖

在src下面新建index,order,mine文件夾,而後在每一個文件夾裏面建立一個main.js和App.vue,由於咱們是多頁面,並不須要src根目錄裏面的main.js和App.vue,在apicloud裏面打開window或frame都須要在apiready完成以後才能執行,可是在每一個vue的模板裏面每次都要寫apiready這個方法感受很是醜(大家也能夠本身試下就在模板裏面寫apiready方法),因此我把apiready放在了main.js裏面,apiready以後再去初始化vue

在index的App.vue寫以下代碼

特別要注意兩點

1.就是template元素下面的第一個根元素必定要加一個名爲app的id

2.openWin或者openFrame的url必定要帶.html的後綴,文件的名稱就是你目錄的名稱,固然文件名稱的規則你能夠自定義,不過要修改build裏面的pages.js的邏輯

可能有人不懂爲啥後綴必定要帶.html，咱們執行以下命令打包看下,這就是打包後生成的文件,因此必定要帶後綴

npm run build
複製代碼

咱們確定會打開frame的需求,那咱們在order文件夾下面新建一個frame文件夾,文件內容仍是App.vue和main.js

order文件夾的App.vue代碼以下,frame的文件名稱的規則是父頁面的文件名稱+Frame,固然你也能夠自行修改

接下來,咱們啓一個服務,會獲得一個ip地址

npm run serve
複製代碼

而後咱們把這個ip地址複製到一個新建的apicloud項目的config.xml裏面去(最好有兩個項目,一個負責vue的方式開發,一個只負責apicloud打包), 啓動地址必定要帶上你的首頁地址

而後咱們就能夠真機運行了,並且修改代碼後會自動熱更新,也不用每次那麼麻煩都去wifi自動同步了,要注意的是這種方式,在咱們開發的時候打開一個window或者frame會有一段時間的黑屏,這個我也沒解決的,若是有人解決了這個問題求解決方案。

開發完成後,確定要上傳apicloud進行雲端打包,打包就更簡單了,還記得咱們剛纔打包的dist文件夾麼,直接複製到apicloud的項目裏面,而後修改啓動地址就能夠了

講的很粗糙,只大致說了下總體思路,裏面還有不少能夠調整的地方,好比如今這樣作,咱們在瀏覽器就無法訪問了,由於vue的初始化是放在apiready裏面的,若是你想還在瀏覽器能夠訪問,那就本身加個特定的標識符判斷下

解決window和frame打開黑屏的問題是用了一個插件,webpack-dev-server-output這個插件能夠將內存文件轉爲文件，這樣就不會黑屏了,代碼以下

const WebpackDevServerOutput = require('webpack-dev-server-output')

module.exports = {
    configureWebpack: {
        plugins: [
          new WebpackDevServerOutput({
            path: 'D:/Code/apicloud/haixingzixun/dist',
            isDel: true
          })
        ]
   }
}
複製代碼

而後只要在config.xml配置你上面設置的那個路徑就能夠了

<content src="dist/home.html"/>
複製代碼

demo地址