cordova+vue开发Android&IOS

本文章仅作为个人笔记

cordova官网

vue官网

cordova官方文档

vue官方文档

• 环境搭建相关就不介绍了，根据官方文档都能很快拿下，这里主要介绍遇到的坑，以及个人搭建习惯

• 直接开始项目搭建

  //创建项目文件夹(如hello)
  mkdir hello
  //进入文件夹
  cd hello
  //创建vue项目(如vue)
  vue init webpack vue
  //安装依赖
  npm install
  //返回项目目录
  cd ..
  //创建cordova项目(如项目名为cordova，包名为com.example.hello)
  cordova create cordova com.example.hello HelloWorld
  //添加Android&IOS项目支持
  cordova platform add ios
  cordova platform add android
  

• 创建完项目更改vue必要的地方

  //更改vue/config/index.js
  dev:{
    assetsPublicPath: '',
  }
  build: {
    index: path.resolve(__dirname, '../../cordova/www/index.html'),
    assetsRoot: path.resolve(__dirname, '../../cordova/www'),
    assetsPublicPath: ''
  }
  //解决android客户端可能出现的空白页问题
  //安装 babel-polyfill
  npm install --save babel-polyfill
  //更改vue/src/main.js
  import "babel-polyfill";
  //预防样式问题，更改vue/index.html
  <meta name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  //防止跨域资源问题，更改vue/index.html
  <meta http-equiv="Content-Security-Policy"
    content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'"/>
  //导入cordova.js，不知道什么用，但是导入没错，在#appp下方导入
  <script src="cordova.js"></script>
  //防止css导入问题，更改vue/package.json
  "css-loader": "^0.18.0",
  

• 更改好vue项目，在vue项目内运行 npm run build 就可以将页面生成至cordova项目了

• 此时更改cordova项目，分两部分

  • Android

    • 主要更改2个地方

      cordova/platforms/android/app/src/main/AndroidManifest.xml
      cordova/platforms/android/CordovaLib/src/main/AndroidManifest.xml
      讲这两个文件的类似<uses-sdk android:minSdkVersion="19" android:targetSdkVersion="28" />内容都注释或者删除便好
      

  • IOS
    使用xcode打开，然后配置开发组便好

• 至此目前我遇到的坑就都解决了，项目完美运行。