当前位置: 首页 > news >正文

vue 项目使用 nginx 部署

前言

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


http://www.lryc.cn/news/485275.html

相关文章:

  • <项目代码>YOLOv8 玉米地杂草识别<目标检测>
  • Wxml2Canvas小程序将dom转为图片,bug总结
  • [ 网络安全介绍 3 ] 网络安全事件相关案例有哪些?
  • SpringMVC学习笔记(二)
  • 51c嵌入式~单片机合集2
  • JavaScript:浏览器对象模型BOM
  • Unity音频导入设置
  • 【数据分享】中国对外投资合作发展报告(2013-2023)
  • java8之Stream流
  • pipx安装提示找不到包
  • Codeforces Round 987 (Div. 2)(前四道)
  • PCB+SMT线上报价系统+PCB生产ERP系统自动化拼板模块升级
  • 微信小程序_小程序视图与逻辑_day3
  • kubesphere环境-本地Harbor仓库+k8s集群(单master 多master)+Prometheus监控平台部署
  • 【提高篇】3.3 GPIO(三,工作模式详解 上)
  • ‘视’不可挡:OAK相机助力无人机智控飞行!
  • javaScript交互补充(元素的三大系列)
  • 数据结构(基本概念及顺序表)
  • 【全面系统性介绍】虚拟机VM中CentOS 7 安装和网络配置指南
  • html + css 自适应首页布局案例
  • 时钟之CSS+JS版
  • ubuntu18.04 配置安卓编译环境
  • pycharm分支提交操作
  • ESP32-C3 开发笔记 之 arduino 正常上传 串口乱码2024/11/15
  • Ubuntu 的 ROS 操作系统 turtlebot3 SLAM仿真
  • 2024年11月15日
  • websocket初始化
  • uniapp ios app以framwork形式接入sentry
  • ⾃动化运维利器Ansible-基础
  • 若依笔记(十一):芋道多租户限制与修改