当前位置: > > > Cordova - 打包Vue项目的详细步骤(将Vue.js项目编译成App)

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

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

一、准备工作

1,环境搭建

首先我们要搭建好 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 属性节点下的 indexassetsRoot 属性,将它们改成 Cordova 项目下的 www 文件夹(注意是 build 下 的 indexassetsRoot 属性,不要改成 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 项目文件夹下。
评论0