搭建vue+cordova开发环境

搭建vue+cordova开发环境

---

搭建WebApp 开发环境，Cordova + VueJS 是不错的选择。

---

1. NodeJS安装配置
   到阿里镜像下载 NodeJS

   配置更新源为阿里

   npm config set registry https://registry.npm.taobao.org 
   npm config get registry
   npm info underscore 

2. Android Studio安装配置
   首先安装JDK1.8以上版本
   其次去下载Android Studio 并安装

3. 安装Cordova ,创建项目目录

   // 安装Cordova 
   npm i -g cordova
   cordova help
   // 创建项目目录
   cordova create appproj cc.zinksor.timelog 时金
   // 添加Android平台
   cordova platform add android
   // 检查编译条件
   cordova requirements

4. 安装Vue

   // 安装Vue和Sass
   npm i -g vue-cli sass
   // 安装python环境
   wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda2-5.3.1-Windows-x86_64.exe 
   // 下载mdbvue
   wget https://cdn.npm.taobao.org/mdbvue/-/mdbvue-5.0.0.tgz && tar xzf mdbvue-5.0.0.tgz -C .\vueproj  
   

5. 修改文件

   1. 将config/index.js 里面的

          assetsPublicPath:'/' 改为assetsPublicPath:'./' 
       index: path.resolve(__dirname, '../../www/index.html'),
          assetsRoot: path.resolve(__dirname, '../../www/'),

   2. build/util.js里面的

      if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader',
            publicPath:'../../'   
      })
      将其中的publicPath改为：publicPath：'../../'就可以了。这样打包出来的路径就是正确的了。

6. 测试生成apk文件

   cd vueproj
   npm i
   npm run dev
   npm run build
   cd ..
   set ANDROID_HOME=G:\Develop\Sdk
   set GRADLE_HOME=G:\Develop\android-studio\gradle\gradle-5.1-milestone-1
   set path=%path%;%ANDROID_HOME%\tools;%GRADLE_HOME%\bin;
   
   cordova build android && for /f %i in ('dir *.apk /s /b')　do @move %i . /y