1、Unexpected end of JSON input原因及如何解決
總是遇到一個報錯，導致有時候渲染有問題，我們看看啥報錯：
11:29:07.092 [Vue warn]: Error in render: "SyntaxError: Unexpected end of JSON input"
11:29:07.131 (found at pages/account/account.vue:1) 11:29:07.152 SyntaxError: Unexpected end of JSON input
初看是JSON解析的問題。但是account代碼很簡單，沒什么json解析問題啊，后來發現是取userInfo信息時報錯
getters: { userInfo(state) { if (!state.userInfo) { state.userInfo = JSON.parse(uni.getStorageSync('userInfo')) } return state.userInfo } },
如果userInfo不存在時，去storage里面取，如果不存在，這時候就為空。JSON.parse('')，所以就報這個錯。
JSON.parse('') // VM483:1 Uncaught SyntaxError: Unexpected end of JSON input // at Object.parse (<anonymous>) // at <anonymous>:1:6
那么知道了原因，稍微改一下即可：
getters: { userInfo(state) { if (!state.userInfo) { let _user = uni.getStorageSync('userInfo') state.userInfo = _user ? JSON.parse(_user) : null } return state.userInfo } },
2、static目錄的一些注意事項
（1）編譯到任意平台時，static 目錄下的文件均會被打包進去，非 static 目錄下的文件（vue、js、css 等）被引用到才會被包含進去。
（2）static 目錄下的 js 文件不會被編譯，如果里面有 es6 的代碼，不經過轉換直接運行，在手機設備上會報錯。
（3）css、less/scss 等資源同樣不要放在 static 目錄下，建議這些公用的資源放在 common 目錄下。
template內引入靜態資源，如image、video等標簽的src屬性時，可以使用相對路徑或者絕對路徑，形式如下
// 絕對路徑，/static指根目錄下的static目錄，在cli項目中/static指src目錄下的static目錄
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
// 相對路徑
<image class="logo" src="../../static/logo.png"></image>
注意：
（1）@開頭的絕對路徑以及相對路徑會經過base64轉換規則校驗
（2）引入的靜態資源在非h5平台，均不轉為base64。
（3）H5平台，小於4kb的資源會被轉換成base64，其余不轉。
（4）自HBuilderX 2.6.6-alpha起template內支持@開頭路徑引入靜態資源，舊版本不支持此方式。
（5）App平台自HBuilderX 2.6.9-alpha起template節點中引用靜態資源文件時（如：圖片），調整查找策略為【基於當前文件的路徑搜索】，與其他平台保持一致
（6）支付寶小程序組件內 image 標簽不可使用相對路徑
4、JS文件引入
js文件或script標簽內（包括renderjs等）引入js文件時，可以使用相對路徑和絕對路徑，形式如下
// 絕對路徑，@指向項目根目錄，在cli項目中@指向src目錄
import add from '@/common/add.js'
// 相對路徑
import add from '../../common/add.js'
注意：js文件不支持使用/開頭的方式引入
5、運行環境判斷
如何區分開發環境或生產環境？
uni-app 可通過 process.env.NODE_ENV 判斷當前環境是開發環境還是生產環境。一般用於連接測試服務器或生產服務器的動態切換。在HBuilderX 中，點擊“運行”編譯出來的代碼是開發環境，點擊“發行”編譯出來的代碼是生產環境。cli模式下，是通行的編譯環境處理方式。
if(process.env.NODE_ENV === 'development'){ console.log('開發環境') }else{ console.log('生產環境') }
如果你需要自定義更多環境，比如測試環境：
- 假設只需要對單一平台配置，可以 package.json 中配置，在HBuilderX的運行和發行菜單里會多一個出來。https://uniapp.dcloud.io/collocation/package
- 如果是針對所有平台配置，可以在 vue-config.js 中配置。https://uniapp.dcloud.io/collocation/vue-config
HBuilderX 中敲入代碼塊 uEnvDev、uEnvProd 可以快速生成對應 development、production 的運行環境判定代碼。
// uEnvDev
if (process.env.NODE_ENV === 'development') { // TODO
} // uEnvProd
if (process.env.NODE_ENV === 'production') { // TODO
}
6、easycom：easycom組件模式
傳統vue組件，需要安裝、引用、注冊，三個步驟后才能使用組件。easycom將其精簡為一步。 只要組件安裝在項目的components目錄下，並符合components/組件名稱/組件名稱.vue目錄結構。就可以不用引用、注冊，直接在頁面中使用。
不管components目錄下安裝了多少組件，easycom打包后會自動剔除沒有使用的組件，對組件庫的使用尤為友好。
組件庫批量安裝，隨意使用，自動按需打包。以官方的uni-ui為例，在HBuilderX新建項目界面選擇uni-ui項目模板，只需在頁面中敲u，拉出大量組件代碼塊，直接選擇，即可使用。大幅提升開發效率，降低使用門檻。
在uni-app插件市場下載符合components/組件名稱/組件名稱.vue目錄結構的組件，均可直接使用。
easycom是自動開啟的，不需要手動開啟，有需求時可以在pages.json的easycom節點進行個性化設置，如關閉自動掃描，或自定義掃描匹配組件的策略。設置參數及如何使用見官網文檔。
說明：
easycom方式引入的組件無需在頁面內import，也不需要在components內聲明，即可在任意頁面使用easycom方式引入組件不是全局引入，而是局部引入。例如在H5端只有加載相應頁面才會加載使用的組件- 在組件名完全一致的情況下，
easycom引入的優先級低於手動引入（區分連字符形式與駝峰形式） - 考慮到編譯速度，直接在
pages.json內修改easycom不會觸發重新編譯，需要改動頁面內容觸發。 easycom只處理vue組件，不處理小程序專用組件（如微信的wxml格式組件）。不處理后綴為.nvue的組件。但vue組件也可以全端運行，包括小程序和app-nvue。可以參考uni ui，使用vue后綴，同時兼容nvue頁面。nvue頁面里引用.vue后綴的組件，會按照nvue方式使用原生渲染，其中不支持的css會被忽略掉。這種情況同樣支持easycom