搭建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