一粥航、項(xiàng)目的登錄攔截及用戶權(quán)限訪問控制問題簿盅。
一個(gè)很常見的需求就是對(duì)未登錄的用戶進(jìn)行路由攔截和用戶的權(quán)限訪問祟身，如果你的項(xiàng)目之前是通過后臺(tái)控制訪問路由的菩貌，那么之前的后端現(xiàn)在可能需要在前端也需要控制了，由于我們用vue腳手架搭建的都是純前端的路由訪問欺缘，先看看我們的一般的項(xiàng)目路徑：
你可能會(huì)注意到Vue的項(xiàng)目路徑里都有這個(gè)#號(hào)栋豫，這是一個(gè)錨點(diǎn)，說明我們的頁面靠后端可能控制不了你的路由了谚殊，這時(shí)候你需要進(jìn)行Vue的路由攔截丧鸯。(Vue-router 有個(gè)模式可以改為history ，但是改成這個(gè)模式后需要后端的服務(wù)有對(duì)應(yīng)的兼容嫩絮，否則會(huì)造成某些頁面刷新找不到頁面丛肢，而且不會(huì)出現(xiàn)404頁面，需要自己寫路由去匹配404頁面剿干，慎用) 蜂怎。這時(shí)候我們需要在router的里面添加meta字段進(jìn)行自定義一些信息。像下面這樣：
然后再main.js 加入全局的路由攔截置尔。
router.beforeEach((to,from, next) =>{if(to.meta.requireAuth){ //是否需要登錄攔截if(store.state.tokens.token){ //已登錄
next()
}else{
next({
path:'/',
query: {redirect : to.fullPath}
})
}
}else{
next()
}
})
同理杠步，用戶權(quán)限的認(rèn)證也可以這么做。另外需要注意的是榜轿，這個(gè)登錄狀態(tài)需要使用localstorage或者cookie保存幽歼，只存在store里面會(huì)導(dǎo)致頁面一刷新登錄狀態(tài)就沒了（當(dāng)然你可以在頁面mounted的時(shí)候去后臺(tái)獲取狀態(tài)，然后改變store）谬盐。
二甸私、組件的異步加載(按需加載組件)
在平時(shí)的demo中，你可能不會(huì)遇見這個(gè)需求设褐，當(dāng)頁面很多颠蕴，組件很多的時(shí)候泣刹，你會(huì)發(fā)現(xiàn)你的頁面在首次加載的時(shí)候助析，異常的慢，這個(gè)是因?yàn)関ue首次加載的時(shí)候把可能一開始看不見的組件也一次加載了椅您，這個(gè)時(shí)候就需要對(duì)頁面優(yōu)化了外冀，就需要異步組件了。如何去寫異步組件呢掀泳，實(shí)際上很簡(jiǎn)單雪隧，只需要在你的路由index,js里加上require就可以了西轩，像下面這樣，這也是所謂的按需加載組件的實(shí)現(xiàn)原理脑沿。
{
path:'/home',
name:'Home',
component: function(resolve){
require(['@/views/home'], resolve)
}
}
三藕畔、多語種處理
你的項(xiàng)目可能是面向國(guó)際化的，此時(shí)你需要對(duì)項(xiàng)目進(jìn)行多語種處理庄拇。幸運(yùn)的是Vue已經(jīng)有了這個(gè)多語種的插件注服，vue-i18n .你可以像我這樣新建幾個(gè)多語種文件，
en.js
constmessagesEn ={
hello:'Hello world'}
exportdefaultmessagesEn
zh.js
constmessagesZh ={
hello:'你好措近、世界'}
exportdefaultmessagesZh
i18n.js
import messagesEnfrom'./en'import messagesZhfrom'./zh'constmessages ={
en: {
message: messagesEn
},
zh: {
message: messagesZh
}
}
exportdefaultmessages
然后再main.js 里引用
import VueI18nfrom'vue-i18n'import messagesfrom'./international/i18n'Vue.use(VueI18n)consti18n =newVueI18n({
locale:'en',//語言標(biāo)識(shí)messages
})
你可以在一個(gè)頁面里調(diào)用this.$i18n進(jìn)行語種切換
this.$i18n.locale? ='zh'
頁面里
{{ $t("message.hello") }}
js里面：
mounted: function(){
alert(this.$t('message.hello'))
}
加入這樣的標(biāo)簽就可以顯示國(guó)際化文件里的對(duì)應(yīng)此條了溶弟。
四、部署的生產(chǎn)環(huán)境上后和開發(fā)環(huán)境的樣式不一樣
這個(gè)問題我可是遭遇過瞭郑，快上線了居然發(fā)現(xiàn)npm run build 之后放到服務(wù)器端竟然樣式和開發(fā)環(huán)境的不一樣辜御，有點(diǎn)坑！
項(xiàng)目中使用了element-UI的組件屈张，然后自己重寫了部分樣式擒权，但是build之后卻被element-ui本身的樣式給覆蓋了，但在本地卻不會(huì)出現(xiàn)這個(gè)問題（這個(gè)不清楚為啥）阁谆，解決辦法是試試在組件里新建個(gè)
（不加scoped）菜拓，在這里面改樣式，或者在覆蓋elementUI 樣式的時(shí)候在class前面加上body 提高該樣式優(yōu)先級(jí)笛厦，就不會(huì)被覆蓋了纳鼎。另外自己的樣式要寫的規(guī)范，合乎正常的思維裳凸。這個(gè)也提醒我們贱鄙，代碼要提前放到服務(wù)端試一試。
五姨谷、代碼格式逗宁、編輯器不統(tǒng)一造成代碼格式混亂，注意優(yōu)化代碼
這個(gè)無關(guān)Vue梦湘，但是還是建議一個(gè)團(tuán)隊(duì)盡量統(tǒng)一代碼編輯器瞎颗，并且使用eslint進(jìn)行代碼格式檢查，否則會(huì)造成代碼在不同編輯器下顯示混亂捌议，很不容易隊(duì)友閱讀和修改哼拔，并且要時(shí)刻注意優(yōu)化自己的代碼，簡(jiǎn)化復(fù)雜的處理邏輯瓣颅，否則會(huì)給日后的維護(hù)造成極大的困難
六倦逐、圖片路徑問題
將圖片放入static文件夾中即可
