Vue項目用於Ios和Android端開發

原由

前公司商城App項目使用的是H5開發，有微信公衆號、Ios和Android三個版本，H5版本是本身寫的一套框架，已經用了有些年頭了，承載不下不斷涌現出的新需求。而Ios和Android端經過webview加載h5文件顯示，App的原生功能和H5交互的代碼寫得有些凌亂，在我接手項目後老闆徹底沒給重構的時間，因此只能在作新功能的時候順手一點點的重構。後來要作一個與原先的商城相對獨立的新商城，並且新商城的入口放在老商城中。由於時間緊任務重，使用React Native或者weex的話須要將原項目重構後再引入，考慮到可能存在的各類各樣的坑，不太可能使用這些解決方案。使用vue或者react構建一個web項目再嵌入原有的app項目中是最穩妥的。最終由於vue的名字在字符數和音節數量上佔了絕對的優點而入選。

vue項目構建

預備

vue中文文檔: https://cn.vuejs.org/v2/guide/instance.html

構建工具環境
nodejs: http://nodejs.cn

構建工具vue-cli:
https://github.com/vuejs/vue-cli

若是是第一次接觸vue或者在已有項目中引入vue時能夠選擇用CDN版本或者下載js文件

vue的生產版本js：
https://vuejs.org/js/vue.min.js

引入CDN版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

構建項目

若是是做爲一個新項目，仍是建議使用vue-cli構建項目，省時省心

安裝完nodejs環境後在終端裏輸入:

npm install --global vue-cli

進入要存放項目的目錄後建立一個基於webpack模板的新項目

vue init webpack my-project

其餘模板還有pwa、browserify、webpack-simple、simple、browserify-simple等，能夠自行到Github上了解：https://github.com/vuejs-templates

在構建時有這麼幾個選項須要注意：
Vue build:
選擇Runtime + Compiler: recommended for most users
官方的解釋 https://cn.vuejs.org/v2/guide/installation.html#運行時-編譯器-vs-只包含運行時

vue-router:
建議選上，文檔地址 https://router.vuejs.org/zh-cn/

ESLint:
建議選上，模板使用Standard ,官網地址 https://eslint.org

編譯與運行

進入項目根目錄打開package.json文件能夠看到項目的各項配置，其中scripts下存放的是各類命令，在命令行中經過npm run ***來執行

npm run dev 或者 npm start

至關於執行webpack-dev-server --config build/webpack.dev.conf.js啓動開發環境

在開發中常常會使用process.env.***的值來區分不一樣的環境。環境變量的值在/config/*.env.js文件中配置，webpack.dev.conf.js文件中引入的配置文件是dev.env.js，咱們能夠在開發是判斷process.env.NODE_ENV的值是否爲development來肯定當前環境是否爲開發環境

在不改任何配置的狀況下啓動後，在瀏覽器中輸入http://localhost:8080就能夠看到效果了 

 npm run build

執行此命令後會對當前項目進行編譯打包,編譯完成後咱們就能夠在/dist目錄下看到咱們須要的項目文件了。

編譯完成後能夠在終端上看到這樣一段舒適提示，「不容許經過直接打開index.html文件進行訪問哦」

這也就意味着將打包後的項目直接放到Ios或Android項目中使用webview加載也是不容許的。這可如何是好呢？
咱們偷偷的點開/dist/index.html文件看看會發生什麼吧

一片空白而且報了ERR_FILE_NOT_FOUND的錯誤，沒有找到css和js文件。用編輯器打開文件後能夠看到，這幾個文件的路徑確實有些問題，因而在路徑前加上一個.號後發現打開頁面再也不是一片空白了。 

可是，咱們不可能每次編譯都從新手動修改一次文件吧？很明顯這個是能夠在編譯的配置裏面設置的.
打開/config/index.js文件，找到build {}的配置下有一個assetsPublicPath: '/'的參數配置，修改爲assetsPublicPath: './'就好啦，執行npm run build後資源文件的路徑就修改爲./了。

如今不管是用http://仍是file://訪問都沒問題了。放到Ios或者Android項目中應該也沒有問題了

關於source map

使用webpack編譯後會發現每一個資源文件都有一個對應的.map文件，並且這個文件所佔的體積還不小，在沒加任何代碼的狀況下將項目文件壓縮成zip包後大小爲227k，若是刪除.map文件後只有50k，能夠想象.map文件對項目體積的影響。
在編譯完項目後咱們本身寫的全部js代碼會被壓縮到一個app.***.js文件中，這時候若是在線上某個函數報錯了，.map文件能夠幫咱們定位到報錯的函數具體是在哪一個文件裏的。然而大多數狀況下.map文件是沒有必要打包放到線上的.
打開/config/index.js文件，找到build {}的配置下的productionSourceMap改爲false就不會生成.map文件啦 

壓縮打包

在通常項目中在開發完成後咱們一般會將文件打包成一個zip文件，這樣不但方便保存和傳輸，還有一種儀式感。那麼要怎樣在編譯完成以後自動打包成zip文件呢。
首先咱們須要安裝一個webpack-zip-plugin工具

npm i webpack-zip-plugin --save-dev

而後打開/build/webpack.prod.conf.js文件，在文件中引入相關的包

const WebpackZipPlugin =require('webpack-zip-plugin')

在plugin: []中加入WebpackZipPlugin的配置：

    new WebpackZipPlugin({
      initialFile: './dist/release/',  //須要打包的文件夾(通常爲dist)
      endPath: './dist/release/',  //打包到對應目錄（通常爲當前目錄'./'）
      zipName: 'release.zip' //打包生成的文件名
    })

能夠在dist目錄下看到release.zip文件啦。

關於跨域

在本地開發的時候若是要調用服務端的接口，確定會遇到跨域問題，這時候咱們只須要在/config/index.js文件中的dev: {}裏面加上proxyTable就好了

  proxyTable:{
      '/server': {
        target: 'http://192.168.11.5:3001'
      }
    }

這樣咱們就能夠將http://localhost:8080/server路徑的全部請求都轉發到http://192.168.11.5:3001/server下了

Android項目

關於WebView

不管是Android的WebView仍是Ios的UIWebView和WKWebView都只是提供一套接口方便開發者調用，而實際工做都是交給WebKit完成的。後來Google在WebKit的基礎上按照本身的風格與優化出了Blink，用於本身的瀏覽器產品。由Blink咱們能夠看出Google在Android的WebView優化上作出了很多的努力。可是仍是會難以抑制的擔憂系統WebView的性能，尤爲是當看到騰訊X5內核標註的技術特性。無論怎樣，騰訊爸爸的話仍是要信的，因此在demo中使用了X5內核。

image

http://x5.tencent.com/tbs/guide/procIntro.html

加載vue項目

將Vue項目生成的文件放到Android項目的Assets目錄下，使用WebView的loadUrl方法加載就好了

mWebView.loadUrl("file:///android_asset/vue/index.html"); 

關於跨域

若是vue項目中有請求服務端數據的功能，就有可能產生跨域的問題，日誌中會發現以下錯誤

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Android的WebView處理跨域問題很簡單，只要將AllowUniversalAccessFromFileURLs設置爲True就好了

WebSettings webSetting = mWebView.getSettings();
webSetting.setAllowUniversalAccessFromFileURLs(true);

Ios項目

加載vue項目

Ios可使用UIWebView或者WKWebView直接加載

<!--    UIWebView   -->
let mWebView = UIWebView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
let path = Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "vue")

let url = URL(fileURLWithPath: path!)
self.view.addSubview(mWebView)
mWebView.loadRequest(URLRequest(url: url))

<!--    WKWebView   -->
let mWebView = WKWebView.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
    
let path = Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "vue")
    
let url = URL(fileURLWithPath: path!)
self.view.addSubview(mWebView)
mWebView.load(URLRequest(url: url))

demo

github: https://github.com/ljnjiannan/vue-demo