Vue項目中遇到的一些問題總結

1、開發環境使用Ajax請求，報錯 

網上查的資料，在config中的index.js這樣設置

proxyTable:{
    '/api':{
        target:'',    //此處爲你的API接口地址
        changeOrigin:true,
        pathRewrite:{
            '^/api':''    //這裏理解爲用api代替target中的地址
        }
    }
}

配置完後，請求依然報錯，大體是https證書的問題

【HPM】 Error occured while trying to proxy request /xxx/ from localhost:8080 to https://xxxx.xx/xxxx/ ( DEPTH_ZERO_SELF_SIGNED_CERT) (https://nodejs.org/api/errors.html#errors_common_system_errors)

因爲後臺其實沒有證書，因此就增長了個配置：

proxyTable:{
    '/api':{
        target:'',    //此處爲你的API接口地址
        changeOrigin:true,
        pathRewrite:{
            '^/api':''    //這裏理解爲用api代替target中的地址
        }，
        secure:false
    }
}

參考文章 http://www.cnblogs.com/xiterjia/p/6782812.html

 

2、路由鉤子--beforeRouteEnter

剛開始在路由文件中是這樣配置的：

router.js
let router=new VueRouter({
    mode:'history',
    routes:[
        {
            path:'/',
            component:LoginPage,
            beforeRouteEnter:(to,from,next)=>{
                        ...//這樣發現不會觸發，需在相應的組件里加鉤子函數
                    }
        }
    ]
})

 

修改後 login.vue

export default(){
 
beforeRouteEnter:(to,from,next)=>{
                        ...//在這裏加
                    }
}

其實在vue-router的官方文檔中寫的很清楚，本身沒有注意。

3、vue中引入bootstarp

考慮使用bootstrap來進行佈局，所以須要在vue項目中引入bootstrap。

    1）安裝jquery,由於bootstarp中不少依賴jquery:npm install jquery --save--dev 

    2）安裝bootstrap: npm install bootstrap

    3）配置jquery，以插件方式打包，在webpack.base.conf.js中加入如下代碼

let webpack = require('webpack')
在module.exports中加入插件相關配置
plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ]　

    4）.在入口文件main.js中引入bootstarp

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

 

4、路由權限控制

• 鑑權：登陸後記錄token，使用路由鉤子beforeEach，判斷是否有登錄。
• 權限控制路由顯示：動態路由，根據登陸後的用戶角色來匹配

參考方案 https://refined-x.com/2017/11/28/Vue2.0%E7%94%A8%E6%88%B7%E6%9D%83%E9%99%90%E6%8E%A7%E5%88%B6%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/

5、打包上線--vue-router history模式的頁面返回404

使用npm run build打包好後，訪問站點，發現首頁顯示沒有問題，可是路由跳轉到某個頁面就返回404。在開發環境運行都沒有問題，上網一搜，原來是路由的history模式，若是改爲hash模式是沒有問題的，緣由在於使用history模式還須要後臺配置支持，vue-router官方文檔中也提到了這一點。 HTML5 history模式