在使用 Rollup 进行开发时,如果要在不同的域名或端口号下加载模块,可能会遇到跨域问题。Rollup 可以通过一些配置来解决跨域问题。
假设您要在 `http://localhost:3000` 中运行 Rollup 应用程序,并从 `http://localhost:8080` 加载模块。要解决跨域问题,可以在 Rollup 配置文件中添加 `devServer` 配置项:
```js
export default {
// Rollup 配置项
// ...
// 添加 devServer 配置项
devServer: {
contentBase: 'public',
host: 'localhost',
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8080',
pathRewrite: { '^/api': '' }
}
}
}
};
```
在这个例子中,我们使用 `devServer` 配置项来设置一个代理,将 `http://localhost:3000/api` 请求重定向到 `http://localhost:8080`。`contentBase` 指定静态文件目录,`host` 和 `port` 分别指定开发服务器的主机名和端口号。
在我们的 Rollup 应用程序中,可以使用 `/api` 路径来加载模块,而不需要担心跨域问题。例如:
```js
import axios from 'axios';
axios.get('/api/data').then(response => {
console.log(response.data);
});
```
通过添加 `devServer` 配置项,我们可以在 Rollup 应用程序中解决跨域问题,从而更轻松地开发和测试应用程序。