Cordova 打包 Vue 项目

小说阅读器用 Vue-cli 3.0搭的，为了打包成安卓 apk我在网上找了各种方式，cordova好像简单易用，就选它吧。

工具环境

• vue-cli 3.5.3
• Cordova 9.0.0
• Android Studio 3.0.3
• macOS

Vue配置

Vue项目下新建 vue.config.js

module.exports = {
  assetsDir: '',
  publicPath: '', //用户部署的基本url,如果不配置默认为部署所在域的根目录，如果不要部署到子路径，则需要配置该项。如果设为空，转移后的使用相对路径引用文件。并且将所有的css js都放到了根目录
  outputDir: 'www', //输出文件夹，我这里设为www,主要是和Cordova配合生成安卓应用的。
  productionSourceMap: false, //不生成map
  runtimeCompiler: true // 包含运行时编译器的 Vue 构建版本
}

Vue 图片引用问题

public 图片的引用

        //错误 browser 可以正常显示 Android 显示失败
        <img src="/img/setting.png" alt="">
        //正确
        <img src="img/setting.png" alt="">

src/assets 图片引用
(png、jpg 文件可正常使用，icon 格式的图片打包时会报错)

        //img 标签
        <img src="@/assets/logo.png" alt="">
        
        //css url() 需在@前加波浪线 ~
        .background {
          background: url("~@/assets/user-bg.jpg")；                  
        }

配置完后 build 在目录下生成 www 文件夹

npm run build

cordova

使用npm 安装 cordova。

npm install cordova -g

安装完成后使用 cordova -v ,看看是否安装成功。

如果提示命令不存在，那可能是 npm 安装路径错误。

//获取全局安装路径
npm root -g 

//正确应为 /usr/local/lib/node_modules

//如果不正确使用一下命令修改
npm config set prefix /usr/local

cordova还需要Gradle、sdk 等环境，直接安装 Android Studio 即可。

按照文档创建、运行项目

$ cordova create myapp com.example.myapp MyAPP

$ cd MyAPP

$ cordova platform add android

//将 vue build 生成的 www 目录替换进 MyAPP

$ cordova build android

$ cordova run android

Android Studio

使用 AS 可能出现一些问题：

1. gradle 无法下载
   gradle 的下载地址虽然没有被墙，但经常出现下载巨慢，或下载失败的问题。离线安装 gradle

2. dl.google.com 443