最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 基于sapper开发svelte项目配置本地代理

    正文概述 掘金(月盾)   2021-01-06   686

    基于sapper开发svelte项目配置本地代理

    最近使用svelte开发一个项目,说实在的,开发过程中遇到不少问题。 每次遇到问题的时候都有种想放弃的冲动,这生态也太差了,查个啥啥问题都查不到,找个啥啥插件也没有。 不过,到最后,遇到的问题又都解决了。 这不,今天又遇到了本地代理的设置问题。 在说遇到的问题之前先介绍一些项目架构。该项目是基于sapper框架开发,这是一个使用svelte开发的框架,具备以下特点:

    • 服务端渲染
    • 路由
    • 代码分割
    • 默认支持渐进式web应用(PWA)
    • 预取路由
    • 单独的头标签(meta,link等)
    • 作为静态站点弹出
    • Cypress测试(免费,简单,端到端的测试)

    可以看到,sapper基本是集合了目前前端开发所有需求,双向数据绑定,渐进式开发,SSR,静态化,高性能。

    遇到的新问题:对于前端项目,调用接口时容易遇到跨域问题,一般是使用本地代理解决。自然也想这样来做,可是sapper没有vue项目那样的生态,用的打包工具也不是webpack,而是rollup。 那么就使用sapper自带的服务端来做代理好了。sapper的服务端用的是polka,而不是express,不过没关系,其实可以相互替换。 最关键的是增加了http-proxy-middleware中间件,却对中间件位置很敏感,不是想随便在哪添加一下就行。需要添加在第一个中间件位置,否则就会优先使用静态服务中间件,导致接口找不到。 完整代码:

    import sirv from 'sirv';
    import polka from 'polka';
    import compression from 'compression';
    import * as sapper from '@sapper/server';
    import { createProxyMiddleware } from 'http-proxy-middleware';
    
    const { PORT, NODE_ENV } = process.env;
    const dev = NODE_ENV === 'development';
    
    polka()
    	// 需要放在最前面,否则接口404,secure参数解决调用https问题
    	.use('/api', createProxyMiddleware({ target: 'https://example.com', pathRewrite: { '^/api': '' }, secure: false, changeOrigin: true, }))
    	.use(
    		compression({ threshold: 0 }),
    		sirv('static', { dev }),
    		sapper.middleware()
    	)
    	.listen(PORT, err => {
    		if (err) console.log('error', err);
    	});
    
    

    总结: 总体来说,使用svelte开发的确没有vue顺畅,但遇到的问题都有解决方案,对于一些非核心项目还是可以使用的,粗略的对比老项目,在性能上有50%的提升。如果你不想使用回最原始的开发方式来提升性能,那么svelte是个不错的备选方案。

    原文:www.yuedun.wang/blogdetail/…


    起源地下载网 » 基于sapper开发svelte项目配置本地代理

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元