在打包之前需要修改一个地方，那就是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. mssql中quotename的作用

    quotename是保证字符原样输入到mssql中 eg: select * from '+QUOTENAME(@tbname) 用于所传字符为mssql保留字样

  2. 21次C++作业

    //第一题目 class A //A为基类 {public: void f1( ); int i; protected: void f2(); int j; private: int k; }; /* ...

  3. Hibernate的批量抓取

    批量抓取理解:如果我们需要查找到客户的所有联系人的话,按照正常的思路,一般是首先查询所有的客户,得到返回的客户的List集合.然后遍历List集合,得到集合中的每一个客户,在取出客户中的联系人(客户表 ...

  4. 从头到尾说一次 Java 垃圾回收，写得非常好！

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 作者:聂晓龙(花名:率鸽),阿里巴巴高级开发工程 ⬆️ 图片来源于网络 之前上学的时候有这个一个梗,说在食堂里吃饭,吃完把餐 ...

  5. java基础笔记（1）

    ---恢复内容开始--- JVM:java虚拟机,java跨平台是通过JVM来实现的, 将java文件执行的过程:源文件----编译器----->字节码文件------解释器------> ...

  6. 汇编移位: SHL、SHR、SAL、SAR、ROL、ROR、RCL、RCR

    SHL.SHR.SAL.SAR: 移位指令 ;SHL(Shift Left):      逻辑左移 ;SHR(Shift Right):      逻辑右移 ;SAL(Shift Arithmetic ...

  7. Java并发知识总结

    jixu 8. 并发 启动线程的几种方式 Thread t7 = new Thread(timer); t7.start(); Thread.sleep(100) //暂停当前线程 class MT ...

  8. 360CTF Re wp

    这比赛唯一的一道Re

  9. JavaScript数组为什么是对象

    有过PHP编程经验的程序员学习JavaScript的时候,会发现数组也是对象,这和PHP是不同的,在PHP中数组就是数组类型,并不是是对象.究竟为什么在JavaScript中数组会是对象呢? var ...

  10. Groovy基本语法

    官方文档 注释(Comments) 和Java一样,支持单行(使用//).多行(/* */)和文档注释(使用/** */). Shebang line UNIX系统支持一种特殊的单行注释叫作Sheba ...