三、创建项目
1)生成cordova项目
cordova create 项目目录名 反向域 项目名
cordova create testApp com.test.app
这里testAPP是项目的名字,com.test.app是APP的包名,可以随意取,最好按照“com.” 开头
目录说明:
Hooks: 存放readme.md文件
Platfroms:通过cordova platforms add android 添加的安卓相关文件就放在里面,这个文件夹比较重要,打包生成的apk也在这个文件夹下
plugins:cordova安装的插件在此文件夹下
www:前端代码,如html,js,css等代码(vue打包后的文件就放在这里)
config.xml:打包项目的配置文件,可以修改APP的包名,应用名称等
将vue 项目放入 cordova中
cd cordova的项目根目录下
执行vue create vue-src(这里vue-src可以换,只不过这样起名比较常用)
3)vue配置
cd 到 vue项目下执行
vue ui
点击变量
将输出目录改为 ../www (此时你build出来的文件会直接放在上一级的www文件中)
点击配置 配置vue项目 设置公共路径为 ./ (否则可能出现生成的apk启动时会出现白屏的现象)
输出目录改为 ../www
保存后,vue目录下会自动生成vue.config文件
如果不想用vue ui 来配置,也可以直接建vue.config.js文件自行配置
vue文件改造
为了使vue更好的为移动端服务,我们需要改动以下文件
将cordova项目www目录下的index.html打开,复制所有meta
覆盖掉vue public 下的index.html,并添加cordiva.js
打开vue 的main.js
改造为
如果只想在浏览器中查看效果则不用加,加了后会显示不出