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

Tue, 05 Jan 2021 11:09:55 +0000

sapper可能被放弃更新，如果您要继续使用svelte，可以考虑使用sveltekit

最近使用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是个不错的备选方案。

本地代理 on 月盾的博客

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