如何在Cordova中部署Aurelia？Aurelia示例项目能否集成Cordova开发移动端？

作为同时折腾过Cordova和Aurelia的开发者，我来一步步帮你搞定这两个问题——把Aurelia部署到Cordova，还有集成示例项目。新手刚开始摸这俩确实容易懵，咱们慢慢来：

首先得把必备工具装全，都是基于Node.js的：

• 先确保你装了Node.js（推荐LTS版本），没装的话先去官网下一个。
• 全局安装Cordova和Aurelia CLI：

  npm install -g cordova aurelia-cli
  

• 安装完可以验证一下：cordova -v和au -v能输出版本号就说明没问题。

先搭好Cordova的基础架子：

• 找个你喜欢的文件夹，打开终端，创建Cordova项目：

  cordova create aurelia-cordova-app com.yourname.aureliaapp AureliaCordovaApp
  

  解释下参数：aurelia-cordova-app是项目文件夹名，com.yourname.aureliaapp是你的应用包名（要唯一，一般用反向域名），AureliaCordovaApp是应用显示名称。
• 进入项目目录：

  cd aurelia-cordova-app
  

• 添加你要开发的目标平台，比如安卓（iOS需要Mac环境）：

  cordova platform add android
  

这里分两种情况，不管是新建Aurelia项目还是用官方示例，步骤都差不多：

3.1 直接用Aurelia官方示例项目 #

Aurelia的skeleton-navigation是最常用的示例，包含路由、组件这些基础功能，很适合新手：

• 在Cordova项目根目录下，创建Aurelia项目并选择官方示例：

  au new aurelia-src
  

  运行后会让你选模板，选Default Skeleton (Navigation)就行；然后选包管理器，选npm。
• 进入Aurelia项目目录，安装依赖并本地测试：

  cd aurelia-src
  npm install
  au run
  

  打开浏览器看http://localhost:9000，能看到Aurelia的示例页面就说明没问题。

3.2 关键配置：让Aurelia构建产物输出到Cordova目录 #

Cordova是从www目录打包应用的，所以得让Aurelia构建后的文件直接放到这里：

• 打开Aurelia项目里的aurelia_project/aurelia.json文件，找到build配置块里的output，把dir的值从dist改成../www，比如：

  "build": {
    "targets": [
      {
        "id": "web",
        "displayName": "Web",
        "output": {
          "dir": "../www"
        }
        // 其他配置不变
      }
    ]
  }
  

• 另外检查下Aurelia项目的index.html，所有资源引用要用相对路径（比如scripts/app.js，不要用/scripts/app.js），Cordova本地运行时绝对路径会出问题。

现在把Aurelia打包到Cordova里，跑起来看看：

• 回到Aurelia项目目录，构建项目：
  • 开发环境（方便调试）：au build
  • 生产环境（压缩代码，适合发布）：au build --env prod
• 回到Cordova项目根目录，运行应用：
  • 安卓（需要模拟器或连接真机）：cordova run android
  • iOS（Mac环境）：cordova run ios
• 开发阶段想省事儿，可以用热重载：一边开au watch（修改Aurelia代码自动构建），一边用cordova run android --livereload，手机上的应用会自动刷新，不用每次都重新打包。

• Cordova API调用时机：如果你的Aurelia代码要用到Cordova的插件（比如相机、通讯录），一定要等deviceready事件触发后再调用，不然会报错。可以在Aurelia的main.js里加这段代码：

  document.addEventListener('deviceready', () => {
    console.log('Cordova 准备就绪！');
    // 这里放需要Cordova API的初始化代码
  }, false);
  

• 路径问题：Cordova是本地文件系统，Aurelia的路由、图片/资源引用都要用相对路径，绝对路径（/开头）会找不到文件。
• 插件安装：用到什么Cordova功能就装对应的插件，比如要访问相机就装cordova plugin add cordova-plugin-camera，别忘装。

如果你已经有现成的Aurelia示例项目（比如从GitHub克隆的）：

• 在Cordova项目根目录新建aurelia-src文件夹，把示例项目的所有文件（除了node_modules）复制进去。
• 进入aurelia-src，运行npm install安装依赖。
• 按照3.2的步骤修改aurelia.json的输出目录为../www。
• 然后重复第四步的构建和运行操作就行。

内容的提问来源于stack exchange，提问作者arun kumar