Awesome
🚀React Hooks + Next.js + Egg.js + MySql + GraphQL + Ant Design 博客系统
技术栈
- React
- Next
- TypeScript
- Webpack
- Node.js
- Egg
- TSLint
blog/admin/service
项目拉取后需要进入相应目录分别进行安装依赖项
以 bolg 前台为例:
cd blog
yarn install
blog
# 项目启动
yarn dev
# 项目部署
npm run build //打包
pm2 start npm -- run start // 进程守护
// 或者
pm2 start 'npm start'
admin
# 项目启动(开发模式)
npm start
# 项目打包
# 由于是个人后台管理页面放到其他位置以静态页面模式使用
yarn build
service
# 项目启动(开发模式)
npm i
npm run dev
open http://localhost:7001/
# 项目部署
npm start
npm stop
遇到的问题
跨域设置
// config/plugin.js
exports.cors = {
enable: true,
package: "egg-cors"
};
// config/config.default.js
config.security = {
csrf: {
enable: false
},
domainWhiteList: ["http://127.0.0.1:3000", "http://127.0.0.1:3001"]
};
config.cors = {
// origin: 'http://127.0.0.1:3000',
// origin 字段存在会忽略 domain白名单
credentials: true, //允许Cook可以跨域
allowMethods: "GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS"
};
domainWhiteList:用于设置白名单(多个)
origin:设置跨域地址(只能一个)
想要设置多个跨域地址,请注释掉 origin 字段,在白名单字段设置地址数组
react 打包后,项目部署完毕,刷新页面报错 404
// 将 BrowserRouter
import { BrowserRouter as Router, Route } from "react-router-dom";
// 改为 HashRouter
import { HashRouter as Router, Route } from "react-router-dom";