前言
记录下使用element-admin-template 改造项目踩过的坑及打包部署过程
一、根据权限增加动态路由不生效
原因是Sidebar中路由取的 this.$router.options.routes,需要在计算路由 permission.js 增加如下代码
// generate accessible routes map based on roles
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)//增加该代码
router.options.routes = store.getters.permission_routes// dynamically add accessible routes
router.addRoutes(accessRoutes)
二、切换不同权限用户登陆提示 404
这个原因网上有解释,这里直接写处理方式:
在views/login/index.vue 文件中屏蔽 watch 代码
// watch: {// $route: {// handler: function(route) {// this.redirect = route.query && route.query.redirect// },// immediate: true// }// },
三、打包部署过程
1.执行 npm run build:prod 后,生成 dist 文件夹
2.配置 nginx 规则
server {listen 8106;location / {root /home/vue/dist;try_files $uri $uri/ @router;index index.html index.htm;error_page 405 =200 $request_uri;}location ^~/shopmall {proxy_pass http://xxx.168.xx.46:8003;}location @router {rewrite ^.*$ /index.html last;}}
配置完后重启nginx
nginx -s reload
浏览器中验证下,就OK 了~