java-js知识库之十二——cordova整合vue开发

最新推荐文章于 2022-07-02 16:12:46 发布

原创最新推荐文章于 2022-07-02 16:12:46 发布 · 385 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#cordova #vue #整合

cordova 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何将Cordova与Vue.js结合使用，包括修改Vue打包路径、调整cordova初始页面、打包流程及插件使用。通过具体步骤和代码示例，帮助开发者实现跨平台移动应用开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇将记录cordova与vue的整合。

一、修改vue打包路径指向

先看项目的位置：
在这里插入图片描述
在vue项目（vuetest）中修改webpack.config.js文件

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },

修改为：

output: {
    path: path.resolve(__dirname, '/java/android/test/www/'),//路径改为cordova项目（test）路径下的www文件夹下
    publicPath: '',//设为空
    filename: 'build.js'
  }

本地开发时，将路径改为原来的。

二、修改cordova初始页面

修改cordova项目www文件夹下index.html

<body>
        <div id="app"></div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="build.js"></script>
    </body>

三、vue打包和cordova打包

3.1 vue打包

命令行进入vue项目目录，npm run build

D:\>cd java/android/vuetest

D:\java\android\vuetest>npm run build

> vuetest@1.0.0 build D:\java\android\vuetest
> cross-env NODE_ENV=production webpack --progress --hide-modules

此时在cordova项目www文件夹下生成build.js、build.js.map、logo.png文件，如图：
在这里插入图片描述

3.2 cordova 打包

3.2.1 打包apk

进入cordova项目目录，命令行输入cordova build android，重新安装apk即可，也可使用热更新。

3.2.2 cordova热更新

不必重新生成apk,使用热更新更新代码，命令行输入cordova-hcp build:

D:\java\android\test>cordova-hcp build

将www目录下所有文件发布至服务器
在这里插入图片描述

如图，cordova整合vue成功。

3.2.3 打开app

在这里插入图片描述

四、vue中cordova插件的使用

仅以cordova-plugin-device插件为例：
vue项目中修改App.vue

//以下为html部分
<div @click="getDevice()">Deceive</div>
<!--展示设备信息-->
<div v-for="(item,mkey) in deviceInfo" >{{item.key}} : {{item.value}}</div>

//以下为js部分
data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      deviceInfo : []
    }
  },
  methods:{
      getDevice(){
          //获取设备信息
          this.deviceInfo=[];
          this.deviceInfo.push({"key":"model","value":device.model});
          this.deviceInfo.push({"key":"uuid","value":device.uuid});
          this.deviceInfo.push({"key":"platform","value":device.platform});
          this.deviceInfo.push({"key":"version","value":device.version});
          this.deviceInfo.push({"key":"serial","value":device.serial});
          this.deviceInfo.push({"key":"manufacturer","value":device.manufacturer});
          this.deviceInfo.push({"key":"cordova","value":device.cordova});
      }
  }

vue目录下命令行npm run build
cordova重新打包或者热更新：cordova-hcp build
重新打开app应用，点击Deceive：
在这里插入图片描述