采用 Next.js 框架, 进行项目构建.
- 多语言切换 (客户端、服务端切换)
- 引入 Antd 组件库
- 接入 Less、Css 样式书写功能
- .next , Next.js 运行所需要的核心目录
- build , webpack 自定义配置文件
- next-build , 打包文件的产物
- out , 打包文件的产物
- public , 公共资源
- |---> images , 这里存放了图片、
- src , 开发目录
- |---> components , 纯组件目录
- |---> constants , 业务逻辑配置目录, 如 路由、 Api 等统一配置
- |---> containers , 业务组件目录
- |---> pages , Next.js 框架定义的路由入口
- |---> utils , 公共函数目录
- |---> serveices , 服务层请求目录
- |---> stores , Mobx 数据状态管理目录
- |---> assets, 资源目录
- |---> |---> less, 样式目录
- |---> |---> |---> style.css , 全局 css 初始化文件
- |---> |---> |---> less-var.less , 全局 less 变量
- |---> |---> locales, 多语言目录, 多语言配置文件
静态服务 CDN 托管
npm run export
将打包出来的 out 目录资源上传到CDN 即可优点: CDN 加速, 不必考虑服务端消耗;
缺点: 只能显示一种语言, 多语言切换需要在客户端动态加载资源进行. 如需要首次加载页面也显示不同语种, 需要打包两份 静态多语言网站, 亦或者使用如下打包方式.
自定义服务部署
npm run build
打包服务端运行文件, 在目录中出现一个 next-build 目录
npm run start
运行打包出来的资源, 访问网站优点: 更加灵活高效的服务端渲染, 支持不同语种的渲染, 对 SEO 非常友好;
缺点: 需要增加服务器,进行资源访问