在打包之前需要修改一个地方，那就是config->index.js文件，修改assetsPublicPath: '/'为assetsPublicPath: './',截图如下

上面文件改好后，开始打包，执行如下命令：

npm run build

生成 dist 文件夹

1.使用 cordova 打包 （较为复杂，安全，需要配置环境）

第一步：安装cordova

如果已经安装则直接跳过，否则执行以下命令：

npm install -g cordova

第二步：新建cordova项目

执行命令

cordova create cordovaApp com.cordova.testapp

cd cordovaApp

cordova platform add android

到这里我们的cordova项目就创建好了。

第三步：修改vue项目

首先修改vue项目的index.html

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

<meta name="format-detection" content="telephone=no">

<meta name="msapplication-tap-highlight" content="no">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
这里注意加入<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">这个的时候可能导致页面样式改变，如果改变则不加，否则还是建议加上。
 
然后引入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'

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

/* eslint-disable no-new */

document.addEventListener('deviceready', function() {

  new Vue({

    el: '#app',

    router,

    template: '<App/>',

    components: { App }

  })

  window.navigator.splashscreen.hide()

}, false);

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

修改build中的

assetsSubDirectory: 'static',

assetsPublicPath: '/',

为

assetsSubDirectory: '',

assetsPublicPath: '',

然后运行

npm run dev

看看是否能够运行起来，如果正常说明到这里是没有问题的。

第四步：将vue文件放到cordova项目中并打包

先在vue项目中运行

npm run build

执行完成后会生成一个dist文件夹，找到这个文件夹将里面的所有文件复制到你的cordova项目的www文件夹下替换它原有的文件。

然后就可以执行

ionic build android --release

platforms -- android -- build -- outputs -- apk -- android-release-unsigned.apk

复制到项目根目录

Git Bash Here

//生成key

keytool -genkey -alias ship.keystore -keyalg RSA -validity 1000 -keystore ship.keystore

说明：keytool -genkey -alias 别名.keystore -keyalg RSA -validity 有效期限(天数) -keystore 别名.keystore

例如：keytool -genkey -alias douban.keystore -keyalg RSA -validity 1000 -keystore douban.keystore

//签名

jarsigner -verbose -keystore ship.keystore -signedjar ship.apk android-release-unsigned.apk ship.keystore

说明：jarsigner -verbose -keystore 别名.keystore(密钥库位置) -signedjar 签名后产生的文件.apk 要签名的文件.apk 别名.keystore(密钥库)

例如：

jarsigner -verbose -keystore douban.keystore -signedjar douban.apk android-release-unsigned.apk douban.keystore

会生成一个可执行的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')

  	}

},

这段代码注释即可。

2.使用 HBuilder 打包 （简单易用）

步骤一：

将 dist 文件 放入 HBuilder 编辑器中，将项目 转换成 App ，生成 manifest.json

步骤二：

配置 manifest.json , 点击 "发行" 按钮 -- 发行为原生安装包(P)

步骤三：

安装 -- 测试 -- 上线

vue2.0 之 douban （七）APP 打包的更多相关文章

  1. Vue2.0 render:h => h(App)

    new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount( ...

  2. 基于vue2.0的在线电影APP，

    基于vue2.0构建的在线电影网[film],webpack + vue + vuex + vue-loader + keepAlive + muse-ui + cordova 全家桶,cordova ...

  3. vue2.0 练习项目-外卖APP(1)

    前言 vue这个框架现在挺流行的,作为一个专注前端100年的代码爱好者,学习下路径流行的框架是必须的!在网上搜索vue的项目是比较少的,在官网进行了入门学后,没有一个项目练习巩固下,学了就等于没学,所 ...

  4. vue2.0 之 douban （六）axios的简单使用

    由于项目中用到了豆瓣api,涉及到跨域访问,就需要在config的index.js添加代理,例如 proxyTable: { // 设置代理,解决跨域问题 '/api': { target: 'htt ...

  5. vue2.0：（七）、vue-resource

    本篇文章开始前,先介绍下什么是vue-resource,并且现在还有一个axios. Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必 ...

  6. Vue2.0 render: h => h(App)的解释

    render: h => h(App)是ES6的写法,其实就是如下内容的简写: render: function (createElement) { return createElement(A ...

  7. vue2.0 之 douban （三）创建header组件

    1.分析 首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题.我们先不做有搜索框的h ...

  8. vue2.0 之 douban （一）框架搭建 及 整体布局

    1.创建豆瓣项目 我们通过官方vue-cli初始化项目 vue init webpack douban 填写项目描述,作者,安装vue-router 初始化后,通过npm install安装依赖 cd ...

  9. vue2.0 之 douban （四）创建Swipe图片轮播组件

    swiper中文文档:http://www.swiper.com.cn 1.我们在components文件夹里创建一个swipe组件,将需要用到的js以及css文件复制到assets/lib文件夹下, ...

随机推荐

  1. ementUi rules表单验证 --》Wangqi

    ElementUi rules表单验证   ElementUi 表单验证 工作中常用到的JS验证 可以在pattern中书写正则,并且配合elementUI进行表单验证. pattern 属性规定用于 ...

  2. 剑指Offer编程题（Java实现）——数组中的重复数字

    题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为 ...

  3. 面试题思考：Stack和Heap的区别 栈和堆的区别

    堆栈的概念: 堆栈是两种数据结构.堆栈都是一种数据项按序排列的数据结构,只能在一端(称为栈顶(top))对数据项进行插入和删除.在单片机应用中,堆栈是个特殊的存储区,主要功能是暂时存放数据和地址,通常 ...

  4. 打开虚拟机提示 无法获得vmci 驱动程序的版本：句柄无效

    我从另一台电脑复制过来虚拟机,提示如题. 找到  我的虚拟机的  *.vmx文件(如NeoKylin.vmx),其中有 vmci0.present = "TRUE",将TRUE改为 ...

  5. 纯css实现网上商城左侧垂直商品分类菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. IDEA错误: 找不到或无法加载主类 com.xxx.freight.dofreight.doFreight解决办法

    1.右键点击工程,选择open Module Settings或点击File选择Project Structure,进入页面 2.选择Artifacts->JAR->From module ...

  7. vue路由守卫配合权限，白名单

    router.beforeEach(async(to, from, next) => { // 进度条开始 NProgress.start() // 确认用户是否已登录(获取它的token值,这 ...

  8. 微信小程序request(ajax)接口请求封装

    微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...

  9. Rsync+sersync部署

    内核版本:2.6.32-431.el6.x86_64 系统采用最小化安装,系统经过了基本优化,selinux 为关闭状态,iptables 为无限制模式 源码包存放位置:/root Rsync 客户端 ...

  10. linux相关认证和权限配置

    [root@rsync-server-1 /]# echo 'rsync_backup:redhat' > /etc/rsync.password [root@rsync-server-1 /] ...