hewking.top

hewking's blog

View the Project on GitHub hewking/blog

React Blog 项目实践

Author: hewking
Labels: blog
Created: 2024-12-01T04:48:15Z
Link and comments: https://github.com/hewking/blog/issues/6

React Blog 项目实践

Start

1. 创建项目

npx create-next-app react-blog

2. 启动项目

yarn dev

3. 配置项目

next.config.js 配置


// 配置支持css, less, sass ，这样就可以导入antd的样式和自己定义的css文件
// 不需要使用 新版本 10以上的 next 自动支持css-module

const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const withSass = require("@zeit/next-sass");

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
  ...withLess(
    withSass({
      lessLoaderOptions: {
        javascriptEnabled: true,
      },
    })
  ),
});

遇到的问题

Failed to load SWC feedback

临时解决办法: 通过查看package-lock.json 中关于SWC 不支持的平台，删除然后再执行 npm install.

启动报错，报node 启动不起来

需要检查node 版本，需要使用v16 以上的，这里可以通过官网查询next 支持的node版本。

egg 搭建中台

next.js 解决跨域

配置中间件

react admin

路由管理 react-router v6

安装react-router-dom

中台中间件中访问拿不到 session

原因为 请求的apiUrl host 配置有点问题，这里可能跟admin 中配置的跨域origin有关系

http://127.0.0.1:7001/admin -> http://localhost:7001/admin/

问题

1. An import path cannot end with a ‘.tsx’ extension

具体变现为，导入tsx 文件时，显示红线必须要写.tsx 拓展名，这时候需要配置好tsconfig.json文件。

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noImplicitAny": false,
    "paths": {
      "@/*": ["./src/*"]
    },
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

参考