使用cordova打包vue-cli项目

1. 使用vue-cli构建项目并完成项目

  1. 具体请自行完成。没有项目可以到github查找

2. 根据cordova文档完成相关环境的部署

  1. 使用命令 cordova requirements 查看环境是否ok
  2. 注意Java JDK,Android SDK,Android target,Gradle环境变量的设置

3. 根据cordova 文档创建项目

  1. cordova create hello com.example.hello HelloWorld
  2. cd hello
  3. cordova platform add android –save
  4. cordova requirements 测试环境
  5. cordova add的项目放在www目录中。我们需要将其替换成我们的项目即可

4. 替换项目

  1. 在已完成的项目中使用插件 (vue-cordova) npm install vue-cordova –save
  2. 在vue项目main.js中使用使用插件import VueCordova from ‘vue-cordova’ ; Vue.use(VueCordova);
  3. 更改config/index.js中的配置信息
   build:{
     assetsSubDirectory: 'static',
     assetsPublicPath: '',  // 将/删去
 }
 
  1. 运行项目 npm run dev 如果可以正常展示则可以进行build构建dist目录得到我们想要的内容
  2. 将dist目录中的内容复制到cordova项目的www下。删除www目录之前的内容。
  3. 在cordova项目中使用命令 cordova build android 或者 cordova run android 查看是否可以在手机中展示
Posted in: Vue
ˆ Back To Top