Vue 實際專案中你可能會遇見問題

紙上得來終覺淺，絕知此事要躬行！

vue的文件和教程看的太多，小的demo做的多，也不如自己實際的進行乙個完整專案的開發。只有做了才知道原來問題這麼多，這裡列舉了一些你做demo教程可能不會遇見的坑。

一、專案的登入攔截及使用者許可權訪問控制問題。

乙個很常見的需求就是對未登入的使用者進行路由攔截和使用者的許可權訪問，如果你的專案之前是通過後台控制訪問路由的，那麼之前的後端現在可能需要在前端也需要控制了，由於我們用vue腳手架搭建的都是純前端的路由訪問，先看看我們的一般的專案路徑：

你可能會注意到vue的專案路徑裡都有這個#號，這是乙個錨點，說明我們的頁面靠後端可能控制不了你的路由了，這時候你需要進行vue的路由攔截。(vue-router 有個模式可以改為history ，但是改成這個模式後需要後端的服務有對應的相容，否則會造成某些頁面重新整理找不到頁面，而且不會出現404頁面，需要自己寫路由去匹配404頁面，慎用) 。這時候我們需要在router的裡面新增meta欄位進行自定義一些資訊。像下面這樣：

然後再main.js 加入全域性的路由攔截。

1 router.beforeeach((to, from, next) =>else9})
10}11 }else
14 })

同理，使用者許可權的認證也可以這麼做。另外需要注意的是，這個登入狀態需要使用localstorage或者cookie儲存，只存在store裡面會導致頁面一重新整理登入狀態就沒了（當然你可以在頁面mounted的時候去後台獲取狀態，然後改變store）。

二、元件的非同步載入(按需載入元件)

在平時的demo中，你可能不會遇見這個需求，當頁面很多，元件很多的時候，你會發現你的頁面在首次載入的時候，異常的慢，這個是因為vue首次載入的時候把可能一開始看不見的元件也一次載入了，這個時候就需要對頁面優化了，就需要非同步元件了。如何去寫非同步元件呢，實際上很簡單，只需要在你的路由index,js裡加上require就可以了，像下面這樣，這也是所謂的按需載入元件的實現原理。

1
7 }

三、多語種處理你的專案可能是面向國際化的，此時你需要對專案進行多語種處理。幸運的是vue已經有了這個多語種的外掛程式，vue-i18n .你可以像我這樣新建幾個多語種檔案，

然後再main.js 裡引用

1 import vuei18n from 'vue-i18n'
2 import messages from './international/i18n'
3vue.use(vuei18n)
45 const i18n = new
vuei18n()

你可以在乙個頁面裡呼叫this.$i18n進行語種切換

this.$i18n.locale = 'zh'

頁面裡

}
js裡面：
mounted: 
function
()

加入這樣的標籤就可以顯示國際化檔案裡的對應此條了。

四、部署的生產環境上後和開發環境的樣式不一樣

這個問題我可是遭遇過，快上線了居然發現npm run build 之後放到伺服器端竟然樣式和開發環境的不一樣，有點坑！

專案中使用了element-ui的元件，然後自己重寫了部分樣式，但是build之後卻被element-ui本身的樣式給覆蓋了，但在本地卻不會出現這個問題（這個不清楚為啥），解決辦法是試試在元件裡新建個

（不加scoped），在這裡面改樣式，或者在覆蓋elementui 樣式的時候在class前面加上body 提高該樣式優先順序，就不會被覆蓋了。另外自己的樣式要寫的規範，合乎正常的思維。這個也提醒我們，**要提前放到服務端試一試。

五、**格式、編輯器不統一造成**格式混亂，注意優化**

這個無關vue，但是還是建議乙個團隊盡量統一**編輯器，並且使用eslint進行**格式檢查，否則會造成**在不同編輯器下顯示混亂，很不容易隊友閱讀和修改，並且要時刻注意優化自己的**，簡化複雜的處理邏輯，否則會給日後的維護造成極大的困難

Vue 實際專案中你可能會遇見問題

Vue 專案中新手可能會犯的錯誤

Vue介紹（面試可能會問到）。

你可能會讀錯的字大集合

Vue 實際專案中你可能會遇見問題

Vue 專案中新手可能會犯的錯誤

Vue介紹（面試可能會問到）。

你可能會讀錯的字大集合

相關推薦