乐趣区

关于next.js:nextjs-根据生产环境和测试环境打不同的包

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 就是测试环境打包。

退出移动版