cordova+vue开发APP

一、安装cordova, 配置环境

npm install -g cordova

自行配置环境,主要是Android SDK

二、创建项目

cordova create help  创建提示
cordova create hello

三、添加平台

cordova platform add android
cordova platform add ios
cordova platform add browser

在浏览器运行

cordova run browser localhost:8000

四、打包

cordova build android

打包成功后的安装包在"platforms/android/app/build/outputs/apk/debug"中

cordova+vue开发APP

创建一个文件夹,在该文件夹下创建上述cordova项目,vue-cli项目与之同级,方便管理。

创建一个基于webpack模板的新项目

vue init webpack my-project
cd my-project

修改vue项目的打包配置文件:
config下的index.js

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../hello/www/index.html'),
    assetsRoot: path.resolve(__dirname, '../../hello/www'),
    //hello为cordova项目文件夹名
    assetsSubDirectory: 'static',
    assetsPublicPath: '', //此处修改

build - utils.js

 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../', //添加此行
        fallback: 'vue-style-loader'
      })
    } else {

将 Vue 项目的打包目录设置到 cordova 项目的 www 文件夹

完成之后,在 vue 目录中运行 npm run build , cordova 项目 www 文件夹下会出现打包出来的 dist 文件夹和 index.html 入口文件。

在 cordova 目录下执行 cordova build 就可以打包出 vue 项目了。

你可能感兴趣的:(cordova+vue开发APP)