前言

记录下使用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 了~

---