Vue常见问题(持续更新)

Vue常见问题(持续更新)

Vue ui组件,开发框架等资料收集:awesome-github-vue 
https://github.com/opendigg/awesome-github-vue

什么是 开发环境、测试环境、生产环境、UAT环境、仿真环境 :
https://blog.youkuaiyun.com/aaa333qwe/article/details/77482099

vue项目的环境变量
https://www.cnblogs.com/zhyzhy/p/10222512.html

手把手教你在 Vue 中使用 JSX:
https://www.jianshu.com/p/9616745a8d0a

Vue.mixin
https://www.cnblogs.com/dengyao-blogs/p/11589962.html

vue强制更新$forceUpdate()
https://www.cnblogs.com/yn-cn/p/12800050.html

vue中v-if和v-for指令最好不要同时使用
https://www.cnblogs.com/reaf/p/11193729.html

vue项目埋点
https://my.oschina.net/u/560237/blog/3209145

vue自定义指令VNode详解 :
https://blog.youkuaiyun.com/qq_27626333/article/details/77743719

理解Vue.mixin,利用Vue.mixin正确的偷懒 :
https://www.cnblogs.com/dengyao-blogs/p/11589962.html

vue组件中this和$el指向 :
https://www.cnblogs.com/mengfangui/p/9722565.html

vue(1) -- this.$nextTick :
https://blog.youkuaiyun.com/u013558749/article/details/72847198

vue中的.sync修饰符 :
https://blog.youkuaiyun.com/xum222222/article/details/80267087

vue 键盘回车事件 :
https://blog.youkuaiyun.com/lx_1024/article/details/79086979

vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native:
https://blog.youkuaiyun.com/fifteen718/article/details/80359844

Vue2.0 $set()的正确使用方式 :
https://blog.youkuaiyun.com/panyang01/article/details/76665448

Vue路由开启keep-alive缓存页面 :
https://www.cnblogs.com/wangyunhui/p/8178392.html

keep-alive的深入理解与使用(配合router-view缓存整个路由页面) :
https://segmentfault.com/a/1190000010546663#articleHeader2

vue项目中,后端返回文件流,axios发送post请求下载文件 :
https://www.cnblogs.com/rongjuan/p/9644676.html


Vuex参考手册
https://www.php.cn/manual/view/32624.html

用qrcode.js动态生成二维码图片
https://www.cnblogs.com/DylanZ/p/6018270.html

路由变化时使用axios取消所有请求
https://www.jianshu.com/p/37be781dc879

谈谈axios配置请求头content-type :
https://www.cnblogs.com/dreamcc/p/10752604.html

vue使用axios中的post请求时, 如何将json数据改为formdata类型 :
https://blog.youkuaiyun.com/weixin_43316300/article/details/100010933

在vue项目中 使用driver.js来进行页面分步引导 :
https://blog.youkuaiyun.com/csl125/article/details/90448179

Vue远程调试 vue-remote-devtools 的使用 :
https://www.jianshu.com/p/036c8eda1e7c

node.js http-server开启https协议服务 :
https://blog.youkuaiyun.com/museions/article/details/107930485

http-server 开启静态服务,http和https
https://www.jianshu.com/p/7895c57a321c?from=timeline&isappinstalled=0

vue 搭建一个本地服务器运行打包后dist文件 :
https://www.jianshu.com/p/369db247bb05

Node.js使用jszip实现打包zip压缩包 :
https://www.bbsmax.com/A/6pdDgl0l5w/

Vue项目中,防止页面被缩放和放大 :
https://blog.youkuaiyun.com/weixin_43953710/article/details/103183059

Vue 项目运行报错 sockjs-node/info 的解决方案:
https://workstudy.top/2020/04/16/Vue-%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C%E6%8A%A5%E9%94%99-sockjs-node-info-%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/#Bug-情况展示

### Spring Boot与Vue.js前后端分离开发中的常见问题及解决方案 #### 1. 跨域请求问题 在前后端分离架构中,前端应用通常部署在一个域名上,而后端服务则运行在另一个域名上。浏览器出于安全考虑会阻止跨源HTTP请求,这被称为同源策略限制。 解决方法之一是在Spring Boot后端配置CORS支持。可以通过实现`WebMvcConfigurer`接口来设置允许的来源、HTTP方法以及头部字段[^1]: ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 允许所有的路径 .allowedOrigins("*") // 允许所有来源 .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的方法 .maxAge(3600); } } ``` 另一种更灵活的方式是通过过滤器拦截请求并手动添加响应头[^2]: ```java @Component public class CorsFilter extends OncePerRequestFilter { @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "authorization, content-type, xsrf-token"); response.addHeader("Access-Control-Expose-Headers", "xsrf-token"); if ("OPTIONS".equals(request.getMethod())) { response.setStatus(HttpServletResponse.SC_OK); } else { filterChain.doFilter(request, response); } } } ``` #### 2. 静态资源加载问题 当Vue项目被构建完成后,其静态文件会被放置于特定目录下(如dist)。如果这些文件直接放入Spring Boot项目的`resources/static/`目录,则可能遇到路径映射错误或者版本控制混乱的情况。 最佳实践建议将前后端视为两个独立模块分别管理,并利用持续集成工具如Jenkins,在每次发布时自动完成前端资源复制操作至目标位置。 #### 3. 数据交互格式差异 JSON是最常用的API数据交换格式,但在实际编码过程中可能会因为时间戳解析、日期序列化等问题引发兼容性障碍。 为了统一双方对于复杂对象比如Date类型的处理逻辑,可以在Spring Boot全局级别定义自定义序列化程序: ```java @Bean public Jackson2ObjectMapperBuilder objectMapperBuilder() { JavaTimeModule module = new JavaTimeModule(); return new Jackson2ObjectMapperBuilder() .modules(module) .serializerByType(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ISO_LOCAL_DATE_TIME)); } ``` 同样地,在Vue侧也需要调整axios插件默认参数以便更好地适配后台返回的数据结构: ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: '/api', timeout: 1000 * 60, transformResponse: [(data) => { try{ const parsedData = JSON.parse(data); return convertDates(parsedData); // 自定义转换函数 } catch(e){ console.error('Error parsing data:', e.message); throw e; } }] }); function convertDates(obj){ Object.keys(obj).forEach(key=>{ let value=obj[key]; if(typeof(value)==='string'){ obj[key]=new Date(value.replace(/-/g,"/")); } }); return obj; } export default instance; ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值