用Cordova打包Vue项目的方法步骤

现在国内越来越多的开发者使用Vue开发混合app，但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。

现在的打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的，有兴趣的可以去学习使用一下。下面说说怎么使用cordova打包Vue项目：

第一步：安装cordova,创建好cordova项目。

第二步：修改vue项目

首先修改vue项目的index.html，引入cordova.js。这个引入在浏览器打开会报错。要打包后运行在真机后方可看到效果

<body>
 <div id="app"></div>
 <script type="text/javascript" src="cordova.js"></script>
 <!-- built files will be auto injected -->
</body>

然后修改src中的main.js为以下代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
document.addEventListener('deviceready', function() {
 new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
 })
 window.navigator.splashscreen.hide()
}, false);

最后修改config文件夹中的index.js文件，修改build中的

assetsSubDirectory: 'static',
assetsPublicPath: '/',

为

assetsSubDirectory: '',
assetsPublicPath: '',

第三步：运行

看看是否能够运行起来，如果正常说明到这里是没有问题的（注意这里运行的时候需要将document.addEventListener注释，
因为在浏览器环境下是找不到cordova.js的也就不能监听到deviceready的事件，打包在真机上才能实现监听）。

第四步：将vue打包好的文件放到cordova项目中并打包cordova run android,会生成一个可执行的apk文件，也可以直接在真机上运行。安装即可。

友情提示：

如果vue项目在运行npm run dev或者npm run build的时候遇到问题一般不是代码出错的话可以将node_modules文件夹删除使用npm install安装。

如果是因为eslint导致代码检查不通过的话，可以将Vue项目的build文件夹下的webpack.base.config文件中的rules

  {
   test: /\.(js|vue)$/,
   loader: 'eslint-loader',
   enforce: 'pre',
   include: [resolve('src'), resolve('test')],
   options: {
   formatter: require('eslint-friendly-formatter')
   }
  },

这段代码注释即可。

PS：通过cordova将vue项目打包成app

一、创建一个cordova工程

cordova create cordovaVue

cd cordovaVue
  • config.xml -包含应用相关信息，使用到的插件以及面向的平台
  • platforms - 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库
  • plugins - 包含应用所需插件的 Cordova 库，使得应用能够访问例如照相机和电池状态相关的事项。
  • www - 包含应用源代码，例如 HTML, JavaScript 和 CSS 文件
  • hooks - 包含为个性化应用编译系统所需的脚本

二、添加安卓平台

cordova platform add android --save

三、在vue项目中生成编译完成的源文件

npm run build

四、将cordova项目中的www文件夹下的内容替换为vue项目中生成的dist文件夹中的内容

五、在cordova项目中创建Android应用

cordova build android

六、将手机连接在电脑上，运行该 Android 程序

cordova run android

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 教你用Cordova打包Vue项目的方法

    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下.因为我本身是做angular+ionic的,所以比较青睐cordova,下面我就教大家怎么使用cordova打包Vue项目: 第一步:安装cordova 如果已经安装则直接跳过,否则执行以下命令: npm install -g cor

  • 用Cordova打包Vue项目的方法步骤

    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 现在的打包Vue项目目前流行的就是使用weex和cordova.weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下.下面说说怎么使用cordova打包Vue项目: 第一步:安装cordova,创建好cordova项目. 第二步:修改vue项目 首先修改vue项目的index.html,引入cordova.js.这个引入在浏览器打开会报错.要打包后运行在真机

  • electron打包vue项目的方法 步骤

    electron打包vue项目的方法 步骤

    目录 创建项目 添加electron-builder electron下载失败 窗体运行 打包exe 白屏 创建项目 点击这里 添加electron-builder 1.在项目目录下运行命令:vue add electron-builder2.electron-builder添加完成后会选择electron版本,直接选择最新版: electron下载失败 vue add electron-builder下载electron会下载失败,使用淘宝镜像下载:cnpm i electron 窗体运行 1

  • jenkins自动构建发布vue项目的方法步骤

    jenkins自动构建发布vue项目的方法步骤

    简介 Jenkins是一个开源的.提供友好操作界面的持续集成(CI)工具,起源于Hudson(Hudson是商用的),主要用于持续.自动的构建/测试软件项目.监控外部任务的运行(这个比较抽象,暂且写上,不做解释).Jenkins用Java语言编写,可在Tomcat等流行的servlet容器中运行,也可独立运行.通常与版本管理工具(SCM).构建工具结合使用.常用的版本控制工具有SVN.GIT,构建工具有Maven.Ant.Gradle. jenkins安装 1.安装JDK yum install

  • pycharm新建Vue项目的方法步骤(图文)

    1.首先安装Node.js 官网:https://nodejs.org/zh-cn/ 1)根据自己电脑型号下载好 2)点击安装,傻瓜式一步一步最后完成安装 3)打开CMD,检查是否正常,如果显示了如下则安装正常 2.使用淘宝NPM镜像 大家都知道国内直接使用npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像. npm install -g cnpm --registry=https://registry.npm.taobao.org 这样就可以使用cnpm命令来安装模块了 3.项目初始

  • M1 pro芯片启动Vue项目的方法步骤

    M1 pro芯片启动Vue项目的方法步骤

    目录 引言 安装Homebrew 安装nvm 安装Node 安装结束 引言 双十一剁手,买了m1 pro的MacBook Pro,所有环境需要重新搭一遍,后端项目比较容易,装个idea就可以启动,前端vue真的是不太通,所以研究了一下,搭建环境并启动vue. 安装Homebrew homebrew是mac本很好的管理软件安装的工具,所以拿到mac本的第一时间我就安装了homebrew,由于网络原因很有可能安装失败,用下面的命令可以使用国内镜像,安装速度比较快. /bin/zsh -c "$(cu

  • nginx下部署vue项目的方法步骤

    今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来. 首先要去nginx官网下下载nginx: 下载地址:https://nginx.org/en/download.html 下载下来会是一个解压包,解压到你想放的文件夹下 运行nginx.exe,然后打开浏览器输入localhost出来如下图片所示就说明成功了: 然后如果没有成功出来的话也不要慌不要怕,可能是你的端口被别的内容所占了这时你就打开你的nginx的目录下找到conf 点击进去然后找到一个ngi

  • 9102年webpack4搭建vue项目的方法步骤

    前言 首先祝大家元宵节快乐,最近已经好久没有写过文章了,刚好趁着这几天刚刚上班,领导还没有来,偷偷的写一篇关于webpack搭建vue的博客.因为公司使用vue比较多,构建vue项目使用vue-cli显得有点臃肿,感觉还是自己配置比较好些,所以就有了这篇教程.由于水平有限,欢迎大家指正,一起进步. 新建项目 1.新建名为webpackconfig文件夹 2.使用命令 npm init -y 在webpackconfig文件夹中生成package.josn 3.下载依赖包 npm i webpac

  • 使用pkg打包ThinkJS项目的方法步骤

    在 ThinkJS 的用户群里,经常有开发者提出需要对源码进行加密保护的需求.我们知道 JavaScript 是一门动态语言,不像其他静态语言可以编译成二进制包防止源码泄露.所以就出现了 pkg.nexe 之类的工具,支持将 JS 代码连同 Node 一块打包成一个可执行文件,一来解决了环境依赖的问题,二来解决了大家关心的源码保护的问题. 在pkg 模块的 README 中,罗列了它的几大用处,如果你有下面的几个需求的话建议不妨试试. 为应用提供商业发行版而不用暴露源码 为应用提供 demo 而

  • webstrom Debug 调试vue项目的方法步骤

    第一种,使用vue插件 1.下载插件:https://www.jb51.net/softs/588080.html 这样直接run一个vue项目,你就会看见插件标亮了 打开调试模式,你就会看见最后有个vue标记,打开能看见当前vue页面渲染相关数据 第二种,使用webstrom调试下载插件 下载地址:https://www.jb51.net/softs/171905.html 打开webstrom Debugger, 记住端口号 打开刚才安装的插件,选项,填入刚才看见的端口号 添加一个debug

随机推荐