P11:Next.js教程-生产环境打包

本文主要带大家学一下Next.js在生产环境下如何进行打包和在打包过程中遇到的一些坑。

其实Next.js大打包时非常简单的,只要一个命令就可以打包成功。但是当你使用了Ant Desgin后,在打包的时候会遇到一些坑。

打包 :next build

运行:next start -p 80

先把这两个命令配置到package.json文件里,比如配置成下面的样子。

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start -p 80"
},

然后在终端里运行一下yarn build,如果这时候报错,其实是我们在加入Ant Design的样式时产生的,这个已经在Ant Design的Github上被提出了,但目前还没有被修改,你可以改完全局引入CSS解决问题。

在page目录下,新建一个_app.js文件,然后写入下面的代码。

import App from 'next/app'

import 'antd/dist/antd.css'

export default App

这样配置一下,就可以打包成功了,然后再运行yarn start来运行服务器,看一下我们的header页面,也是有样式的。说明打包已经成功了。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P11:Next.js教程-生产环境打包

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们