花裤衩 / vue-element-admin 的项目打包后发现不能跳转页面问题解决

最新推荐文章于 2024-04-24 17:22:32 发布
最新推荐文章于 2024-04-24 17:22:32 发布
阅读量2k 收藏 8
点赞数 3
分类专栏： js vue 文章标签： html5 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40410916/article/details/120701493
版权
在vue-element-admin项目中，完成install并build后，直接通过html文件打开发现页面跳转失效。原因是引入了'js-cookie'库，导致必须部署到web服务上运行。为解决此问题，可以将所有使用Cookies.set和Cookies.get的地方替换为localStorage或sessionStorage，以实现本地存储并确保页面能正常跳转。
摘要由CSDN通过智能技术生成

项目install后build打开html文件跳转页面没有反应

原因：因为项目中import Cookies from ‘js-cookie’ 使用无法进行页面跳转需要放到web服务上才能运行。

解决：把所有Cookies.set(‘sidebarStatus’, 1) ，set和get 都换成localstorage或sessionstorage 其他

      Cookies.set('sidebarStatus', 1)
      localStorage.setItem('sidebarStatus',1)
      opened: Cookies.
最低0.47元/天 解锁文章
金lin
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对花裤衩大叔vue-element-admin后台项目的学习
胖胖在努力
03-06 6246
前言 预览地址：https://panjiachen.gitee.io/vue-element-admin/#/dashboard GitHub地址：https://github.com/PanJiaChen/vue-element-admin 文档地址：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/ 技术点 看vue-element-admin代码，学到的技术点。 路由权限生成，src目录下的permission.js文件，详细.
vue-element-admin登录流程改造
qq_40298670的博客
01-16 2003
基于第一篇 https://blog.csdn.net/qq_40298670/article/details/112702174 1.安装最新的vue-element-admin; 2.如有需要可以去掉eslint;在下面这个文件里面全局搜索 3.删除所有的eslint文件 4.开始安装依赖包， npm install 5.启动服务:npm run dev ,但是打开的是两个窗口，需要把open设置为false; 6.进入登录页面： 7.后端编写登录接口（这里以java为列）: 验证码根据需
vue-admin-element+Electron打包exe可执行文件(输出为dist文件夹即可)
最新发布
weixin_53414331的博客
04-24 1109
想要将写好的前端项目打包为可执行的exe文件。(资源放在主页自取)
vue-element-admin 框架结构粗解
kalvin_y_liu的博客
04-30 1万+
vue-element-admin 框架使用总结 安装启动 安装cnpm来解决依赖安装失败问题，安装完之后，可以使用cnpm install安装已有或新增加的依赖，一是可以成功安装外网上的依赖（仓库在国内），二是速度更快 cnpm安装如下： npm install -g cnpm --registry=https://registry.npm.taobao.org 后端环境配置 IP和端口配置： 开发阶段在config/index.js配置proxyTable，目前使用/api代理后端的IP+端口； 在生产
rspack迁移vue-element-admin实践指南
qq_34793381的博客
01-29 1059
前端不断在探索打包，构建的天花板，产出了 vite ， Rspack， Turbopack 等一系列优秀的打包构建工具在好奇心的驱使下， 尝试 以 vue-element-admin 这个仓库作为改造目标， 首先向我们的前辈 【花裤衩】致敬！ 产出如此优秀的后台管理系统模版所有操作均基于 npm 安装包依赖， 未使用 pnpm先说明一下， 老的原始代码，是基于 node: 14.21.3 运行的， 高版本的Node 可能有些 npm包不兼容，无法启动项目 移除掉富文本相关的内容， 这个在 node 14.
vue-element-admin/template+tornado(pyrestful)前后端分离框架实践（2）——登录过程与后端python服务
肖永威的专栏
10-26 3160
本文较为详细的介绍vue-element-admin/template+tornado(pyrestful)前后端分离框架实践——登录过程与python后台API，分析vue-admin-admin登录过程。后端使用pyrestful插件（基于tornado）python实现，通过使用Fiddler与Postman工具分析，解决了跨域问题和json传参问题，详见代码。
vue-element-admin 超过两级嵌套路由无法缓存的解决办法
全干攻城狮
12-21 7788
注意，此解决办法只适用于顶级路由为布局组件，中层路由只为嵌套、末级路由调用页面组件的路由结构 PS： 如您无暇查看解决过程，可直接点击右侧目录中的 步骤一、步骤二 参考修改即可 问题起因 最近公司项目开发，为了套个好看的外壳加上一些基础的功能，选用了花裤衩大佬的 vue-element-admin 项目，移除了一些不需要的功能，最终剩下了后台布局、tab页签、登录页、mock等，基于此开始了愉快的项目开发。 按原型图要求，有如下页面结构： 平台管理（侧边栏目录） 厂商管理（侧边栏菜单） 厂商列表（菜
vue-element-admin登录流程
热门推荐
兔子零
09-24 4万+
1.安装最新的vue-element-admin; 2.如有需要可以去掉eslint;在下面这个文件里面全局搜索 3.删除所有的eslint文件 4.开始安装依赖包， npm install 5.启动服务:npm run dev ,但是打开的是两个窗口，需要把open设置为false; 6.进入登录页面： 7.后端编写登录接口（这里以java为列）: 验证码根据需求来进行设置; 8....
vue-element-admin实现login和logout
rfalcon的博客
12-03 4637
【注】本篇文章介绍的是基于花裤衩链接地址的vue-element-admin模板改造的一个前端的后台管理系统解决方案，数据库运用的是（mysql）黑马教程的电商管理系统的.sql文件，操作步骤来自于网络资料和自己不断尝试的合集，感谢参考和建议！ 文章目录克隆项目去掉eslint安装依赖启动项目后端编写登录接口修改baseurl编辑.env.development文件修改vue.config.js`npm run dev`重新运行，点击登录查看是否配置生效实现登录找到登录请求找到store中的user.js
Vuex namespaced: true使用说明
qq_40410916的博客
08-20 8212
namespaced: true使用 export default { namespaced: true,//namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。 state, mutations, actions } 使用模块中的mutations、getters、actions时候，要加上模块名，例如使用commint执行mutations时 格式：模块名/模块中的mutations xxx/setUserInfo this.$
js中的for循环
qq_40410916的博客
09-02 5077
for循环经常使用，js常用有4中for循环， 普通 for（表达式1；表达式2；表达式3），for（ i in obj），for （item of obj），foreach(callback(val,index,arr),thisArg ) for for 语句用于创建一个循环，它包含了三个可选的表达式，这三个表达式被包围在圆括号之中，使用分号分隔，后跟一个用于在循环中执行的语句（通常是一个块语句）。 let str = ''; for (let i = 0; i < 9; i++) {
uniapp蓝牙使用读写数据
qq_40410916的博客
03-08 4600
<template> <view class='u-form'> <u-no-network></u-no-network> <u-button :ripple="true" @click="openBluetoothAdapter">开启蓝牙并检索设备</u-button> <u-button :ripple="true" @click="stopBluetoothDevicesDiscovery">关闭检索
自定义js对象扁平化处理
qq_40410916的博客
05-27 3582
请将以下层层嵌套的source对象转换成扁平的简单对象：{“a.b.c”: “1”, “a.d”: “2”, “e”: “3”} var source = { a: { b: { c: “1”, }, d: “2”, }, e: “3”, }; var newobj = {}; function flat(cur, key2) { Object.keys(cur).forEach(function(key) { if (typeof cur[key] != "object") { if (key
JavaScript打印输出
qq_40410916的博客
04-07 2603
JavaScript 显示方案 JavaScript 能够以不同方式“显示”数据： 使用 window.alert() 写入警告框 使用 document.write() 写入 HTML 输出 使用 innerHTML 写入 HTML 元素 使用 console.log() 写入浏览器控制台 使用 innerHTML 如需访问 HTML 元素，JavaScript 可使用 document.get...
vuex require.context( )使用
qq_40410916的博客
08-20 1431
require.context( )使用 vuex前端工程化之动态导入文件–require.context( )动态加载modules文件下的所有JS文件 const modulesFiles = require.context('./modules', true, /\.js$/) // you do not need `import app from './modules/app'` // it will auto require all vuex module from modules file c
web前端兼容性问题
qq_40410916的博客
07-01 1382
一直以来，Web前端领域最大的问题就是兼容性问题 前端兼容性问题分三类： 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 浏览器兼容性问题 IE6、7、8不支持HTML5、CSS3、SVG标准，可被判定为“极难兼容” IE9不支持Flex、Web Socket、WebGL，可被判定为“较难兼容” IE10部分支持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容” IE11部分支持Flex、WebGL，可被判定为“较易兼容” IE6、7、8、9可视为“老式浏览器” IE10、11可
各大主流浏览器之间的差异
qq_40410916的博客
07-01 1242
主流浏览器有 ie ,chrome,Safari,firefox，opera，其他。 浏览器最主要的就是引擎，分为渲染引擎（内核）和js引擎（js解释器） 渲染引擎”，用来解释网页语法并渲染到网页上 四大内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko 常见的js引擎 ...
input输入框 禁止插入（粘贴）文字
qq_40410916的博客
08-02 1215
禁止插入文字 你可能不希望用户在输入字段中粘贴从其他地方复制的文本（仔细考虑是否真的要这样做）。通过跟踪事件paste并调用其方法preventDefault()就很容易完成了。 <input type="text"></input> <script> const input = document.querySelector('input'); input.addEventListener("paste", function(e){ e.preventD
快速搭建Vue前端项目：vue-element-admin实践
在本文中，我们将深入探讨如何搭建一个基于Vue和Element-UI的前端项目，以`vue-element-admin`为例，它是一个功能丰富的后台管理前端解决方案。首先，我们需要从GitHub上获取项目源代码，并了解其基本目录结构和关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值