本文章仅作为个人笔记
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打开，然后配置开发组便好
-
至此目前我遇到的坑就都解决了，项目完美运行。
