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

　　Vue的文檔和教程看的太多，小的demo做的多，也不如自己實際的進行一個完整項目的開發(fā)。只有做了才知道原來問題這么多，這里列舉了一些你做demo教程可能不會遇見的坑。

　　一、項目的登錄攔截及用戶權(quán)限訪問控制問題。

　　一個很常見的需求就是對未登錄的用戶進行路由攔截和用戶的權(quán)限訪問，如果你的項目之前是通過后臺控制訪問路由的，那么之前的后端現(xiàn)在可能需要在前端也需要控制了，由于我們用vue腳手架搭建的都是純前端的路由訪問，先看看我們的一般的項目路徑：

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

你可能會注意到Vue的項目路徑里都有這個#號，這是一個錨點，說明我們的頁面靠后端可能控制不了你的路由了，這時候你需要進行Vue的路由攔截。(Vue-router 有個模式可以改為history ，但是改成這個模式后需要后端的服務(wù)有對應(yīng)的兼容，否則會造成某些頁面刷新找不到頁面，而且不會出現(xiàn)404頁面，需要自己寫路由去匹配404頁面，慎用) 。這時候我們需要在router的里面添加meta字段進行自定義一些信息。像下面這樣：

 

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

 

然后再main.js 加入全局的路由攔截。

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

router.beforeEach((to, from, next) =>{    if(to.meta.requireAuth){ //是否需要登錄攔截        if(store.state.tokens.token){ //已登錄
            next()
        }else{
            next({
                path: '/',
                query: {redirect : to.fullPath}
            })
        }
    }else{
        next()
    }
})

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

同理，用戶權(quán)限的認證也可以這么做。另外需要注意的是，這個登錄狀態(tài)需要使用localstorage或者cookie保存，只存在store里面會導(dǎo)致頁面一刷新登錄狀態(tài)就沒了（當然你可以在頁面mounted的時候去后臺獲取狀態(tài)，然后改變store）。

　　二、組件的異步加載(按需加載組件)

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

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

 {
      path: '/home',
      name: 'Home',
      component: function(resolve){
         require(['@/views/home'], resolve)
      }
}

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

　　三、多語種處理

　　你的項目可能是面向國際化的，此時你需要對項目進行多語種處理。幸運的是Vue已經(jīng)有了這個多語種的插件，vue-i18n .你可以像我這樣新建幾個多語種文件，

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

en.js

const messagesEn = {
    hello: 'Hello world'}
export default messagesEn

zh.js

 

const messagesZh = {
    hello: '你好、世界'}
export default messagesZh

i18n.js

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

import messagesEn from './en'import messagesZh from './zh'const messages = {
  en: {
    message: messagesEn
  },
  zh: {
    message: messagesZh
  }
}

export default messages

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

然后再main.js 里引用

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

import VueI18n from 'vue-i18n'import messages from './international/i18n'Vue.use(VueI18n)const i18n = new VueI18n({
  locale: 'en',    // 語言標識  messages
})

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

你可以在一個頁面里調(diào)用this.$i18n進行語種切換

 this.$i18n.locale  = 'zh'

頁面里

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

<p>{{ $t("message.hello") }}</p>
<p v-text="$t("message.hello")"></p>



js里面：

mounted: function(){
　　alert(this.$t('message.hello'))
}

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團訓(xùn)

加入這樣的標簽就可以顯示國際化文件里的對應(yīng)此條了。

　　 四、部署的生產(chǎn)環(huán)境上后和開發(fā)環(huán)境的樣式不一樣

　　這個問題我可是遭遇過，快上線了居然發(fā)現(xiàn)npm run build 之后放到服務(wù)器端竟然樣式和開發(fā)環(huán)境的不一樣，有點坑！

　　項目中使用了element-UI的組件，然后自己重寫了部分樣式，但是build之后卻被element-ui本身的樣式給覆蓋了，但在本地卻不會出現(xiàn)這個問題（這個不清楚為啥），解決辦法是試試在組件里新建個

　　<style>（不加scoped），在這里面改樣式，或者在覆蓋elementUI 樣式的時候在class前面加上body 提高該樣式優(yōu)先級，就不會被覆蓋了。另外自己的樣式要寫的規(guī)范，合乎正常的思維。這個也提醒我們，代碼要提前放到服務(wù)端試一試。

　　五、代碼格式、編輯器不統(tǒng)一造成代碼格式混亂，注意優(yōu)化代碼

　　這個無關(guān)Vue，但是還是建議一個團隊盡量統(tǒng)一代碼編輯器，并且使用eslint進行代碼格式檢查，否則會造成代碼在不同編輯器下顯示混亂，很不容易隊友閱讀和修改，并且要時刻注意優(yōu)化自己的代碼，簡化復(fù)雜的處理邏輯，否則會給日后的維護造成極大的困難

注：本文出自博客園 https://home.cnblogs.com/u/mdengcc/ ，轉(zhuǎn)載請注明出處。

http://www.cnblogs.com/mdengcc/p/7149881.html