【已解决】若依系统前端打包后,部署在nginx上,点击菜单错误:@/views/system/role/index

上面错误,是因为@/views/system/role/index动态路由按需加载时候,错误导致。

解决办法:

如果您的前端项目访问时候,需要带有项目名称的话,参考凯哥上一篇文章:【已解决】若依前后端分离版本,前端项目Nginx部署时候怎么带上应用路径?

先把该修改的都修改后,在来解决这个问题。

凯哥的解决方案如下:

一、将项目中的node_modules 文件夹删除

然后重新

复制代码
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

二、修改babel.config.js文件

将现有的都注释掉,替换成下面的:

复制代码
module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    // '@vue/cli-plugin-babel/preset'
    '@vue/babel-preset-jsx',
    [ '@babel/preset-env',
      {
        'useBuiltIns': 'entry',
        'corejs': 3
      }]
  ],

  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      'plugins': ['dynamic-import-node']
    },
  }
}

三、在对应的环境配置文件中添加。凯哥现在使用的是

npm run build:prod 命令构建的。这是生产环境的。所以,凯哥就修改.env.production配置文件,添加如下两句:

复制代码
BABEL_ENV = production
NODE_ENV = production

配置完成之后,重新安装执行

复制代码
# 构建生产环境
npm run build:prod

将重新生成的dist文件夹放到nginx上面,然后重新访问。登录,点击菜单就正常了。

如果还是不可以的话,参考:动态路由按需加载-Cannot find module · Issue #I4PZJF · 若依/RuoYi-Vue - Gitee.com

相关推荐
我不吃饼干2 分钟前
TypeScript 类型体操练习笔记(三)
前端·typescript
华仔啊5 分钟前
除了防抖和节流,还有哪些 JS 性能优化手段?
前端·javascript·vue.js
Wyawsl5 分钟前
nginx安全笔记
笔记·nginx·安全
CHU72903512 分钟前
随时随地学新知——线上网课教学小程序前端功能详解
前端·小程序
清粥油条可乐炸鸡14 分钟前
motion入门教程
前端·css·react.js
这是个栗子18 分钟前
【Vue3项目】电商前台项目(四)
前端·vue.js·pinia·表单校验·面包屑导航
前端Hardy21 分钟前
Electrobun 正式登场:仅 12MB,JS 桌面开发迎来轻量化新方案!
前端·javascript·electron
树上有只程序猿22 分钟前
新世界的入场券,不再只发给程序员
前端·人工智能
代码派27 分钟前
免费本地部署的数据库 DevOps 工具,能覆盖多少日常工作场景?以 NineData 社区版为例
运维·数据库·database·devops·数据库管理工具·数据管理·sql工具
confiself31 分钟前
deer-flow前端分析
前端