使用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地址