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
页面,也是有样式的。说明打包已经成功了。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P11:Next.js教程-生产环境打包
码云笔记 » P11:Next.js教程-生产环境打包