Cordova - 打包Vue项目的详细步骤（将Vue.js项目编译成App）

2018-07-03 发布：hangge 阅读：8963

现在有越来越多的开发者使用 Vue.js 进行移动应用的开发，而如何将一个 Vue 项目打包成手机可用的 App 有很多方法。下面介绍如何使用 cordova 来打包 Vue 项目（这里以 Android 应用为例）。

一、准备工作

1，环境搭建

首先我们要搭建好 Cordova 环境、Android 环境，具体可以参考我之前写的这篇文章：

Cordova - Windows系统下安装配置Cordova（附编译发布Android应用）

2，创建项目

新建一个 Cordova 项目（用于打包 Vue 项目），并添加 Android 平台文件。具体操作同样可以参考上面文章。

3，项目运行测试

（1）手机先装好设备驱动（这个很重要）

（2）将手机接上电脑，并设置为调试模式。

设置/设定 -> 开发者选项 -> USB 调试。将其打勾，允许 USB 线调试。

（3）运行命令：cordova run android -list 显示当前连接的 android 设备。

（4）运行命令：cordova run android -target="32309910caf57f11"　即可自动将工程编译安装到设备上，并启动真机进行调试。（target 里便是上面查到的设备编码）

如果你电脑只接了一台设备那么直接运行：cordova run android 就好了。

二、修改 Vue 项目

1，修改 config/index.js

将 build 属性节点下的 assetsPublicPath 该成 '' （注意是 build 下的 assetsPublicPath，不要改 dev 下的了）

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',  //原来是 '/'

2，修改 index.html

这里我们手动将 cordova.js 添加进来。

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hangge.com</title>
</head>
<body>
    <div id="app"></div>
    <script type=text/javascript src=cordova.js></script>
</body>
</html>

3，修改 src/main.js

将 new Vue() 代码放到 deviceready 回调里面。（在使用 pc 开发调试时可以先把外层的这个监听给注释掉，等到要打包成 app 时再放开。）

document.addEventListener('deviceready', function() {
  new Vue({
      el: '#app',
      store, 
      router,
      components: { App },
      template: '<App/>'
  })
}, false);

三、打包 Vue 项目

（1）首先在 Vue 项目文件夹下运行如下命令进行编译：

npm run build

（2）执行完成后会生成一个 dist 文件夹，我们将该文件夹里的所有文件复制到 cordova 项目的 www 文件夹下替换掉原有的文件。

（3）进入 Cordova 项目文件夹，执行如下命令就可以生成 App 并自动在手机上安装运行了。

cordova run android

附：让 Vue 项目直接编译到 Cordova 项目下

按照上面的操作，每次打包新版本，我们都需在 Vue 项目编译后手动将 dist 文件夹下的内容复制到 cordova 项目的 www 文件夹下。其实我们可以通过修改编译的发布路径，从而省去手动复制这个操作。

（1）假设我们的 Vue 项目和 Cordova 项目位置是平级的。

（2）修改 config/index.js 文件中 build 属性节点下的 index、assetsRoot 属性，将它们改成 Cordova 项目下的 www 文件夹（注意是 build 下的 index、assetsRoot 属性，不要改成 dev 下的了）

  build: {
    //将文件直接编译到 cordova 项目下面
    index: path.resolve(__dirname, '../../cordova_project/www/index.html'),
    assetsRoot: path.resolve(__dirname, '../../cordova_project/www'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',  //原来是 '/'

（3）这样以后每次我们执行 npm run build 命令都回自动加文件编译到 Cordova 项目文件夹下。