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打开,然后配置开发组便好

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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页