一：使用webstorm建立vue專案

參考：手把手一步步使用webStrom建立vue專案

二：build專案生成dist檔案

執行npm run dev 後開啟連結可看到介面說明專案初始化正常，

然後編輯build命令

點選綠色三角形執行執行npm run build，生成dist目錄及相關檔案：

生成的結構如下：

然後用瀏覽器開啟dist 資料夾中的index.html檔案驗證build是否正常，如果空白說明失敗：

解決方法：

開啟config/index.js檔案，將build標籤下的將 assetsPublicPath: ‘/’ 修改為 assetsPublicPath: ‘./’ 即新增一個點，如下：

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

正常後的介面應該和npm run dev執行的介面相同。

三：使用hbuilder構建APP

Hbuilder官網地址

注意：推薦下載使用紅色圖示的Hbuilder，我是在360軟體管家裡面下載的

版本號：
VERSION 9.0.4
BUILD .201805232049

匯入剛才生成的dist資料夾，此時會看到HBuilder專案下多了一個W標識（表示web專案）的專案，

右鍵選單選擇‘轉換成移動‘轉換成移動App’，然後‘myApp’前面的標識就變成了‘A’,至此就已經轉換成移動app了，

生成app，資料夾會多一個manifest.json檔案，

隨後就可以利用HBuilder連線真機執行或者發行成為原生app。