dev环境和test环境以及pro环境的接口不一样,因为上线之前毕竟是需要测试的。
这就需要我们来打不同的包来便于测试。
在nextjs中,只需要简单的配置就可以完成我们需要的工作,我之前做的时候是根据官方文档写的建立 .env.development , .env.production以及 .env.test,但是打test包之后总是报一个无限循环的bug,试了很久也没解决,如果有熟悉的小伙伴欢迎留言讨论。
目前我用的是另一个方法。
我们建立好nextjs框架之后,找到package.json这个文件,修改其中的
"scripts": {
"dev": "NEXT_PUBLIC_DOMAIN_ENV=development next dev",
"build": "NEXT_PUBLIC_DOMAIN_ENV=production next build && next export",
"start": "next start",
"test":"NEXT_PUBLIC_DOMAIN_ENV=test next build && next export"
}
其中 next build && next export 是打包静态文件到cdn用的。主要是前面加了 NEXT_PUBLIC_DOMAIN_ENV=test 至关重要。
然后我在根目录加了个config文件夹,新建servicePath当做接口地址文件,熟悉react和vue框架的同学应该对这个很熟悉了,axios获取接口的时候用这个很方便(当然文件夹跟文件名称并不是固定的,小伙伴们可以根据自己的需要来取),以下附上我的servicePath.js的内容
let ipUrl = null; //接口
if(process.env.NEXT_PUBLIC_DOMAIN_ENV==="production"){
//生产环境接口地址
ipUrl="http://127.0.0.1:7001"
}else {
//开发以及测试环境接口地址(我这里开发环境和测试环境是一样的接口)
ipUrl="http://128.0.0.1:7005"
}
let servicePath = {
getArticleList: ipUrl + "/getArticleList", //首页接口
};
export default servicePath;
然后在你的页面里引入import servicePath from '../config/servicePath'
剩下的使用就不跟大家过多介绍啦。
最后npm run build
就是生产环境打包,npm run test
就是测试环境打包。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。