feat:ssr改造

.umirc.ts

@@ -8,17 +8,11 @@ export default defineConfig({
     type: "none",
   },
   fastRefresh: {},
-  ssr: {
+  ssr: {},
-    // 更多配置
+  exportStatic: {},
-    // forceInitial: false,
-    removeWindowInitialProps: true,
-    devServerRender: false,  // 默认为true
-    mode: "string",
-    staticMarkup: false,
-  },
   proxy: {
     "/api/": {
-      target: "http://127.0.0.1:8081", //转发接口地址
+      target: "http://127.0.0.1:8000", //转发接口地址
       changeOrigin: true,
       pathRewrite: { "^": "" },
     },

package.json

@@ -1,8 +1,8 @@
 {
   "private": true,
   "scripts": {
-    "start": "SET NODE_OPTIONS=--openssl-legacy-provider&&umi dev",
+    "start": "SET NODE_OPTIONS=--openssl-legacy-provider && umi dev",
-    "build": "SET NODE_OPTIONS=--openssl-legacy-provider&&umi build",
+    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && umi build",
     "postinstall": "umi generate tmp",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
     "test": "umi-test",
@@ -21,9 +21,14 @@
   },
   "dependencies": {
     "@ant-design/pro-layout": "^6.5.0",
-    "@umijs/preset-react": "1.x",
+    "@umijs/preset-react": "^2.1.7",
     "antd": "^4.14.0",
-    "umi": "^3.3.9"
+    "compression": "^1.7.4",
+    "express": "^4.17.1",
+    "helmet": "^3.21.2",
+    "umi": "^3.3.9",
+    "umi-request": "^1.2.4",
+    "umi-server": "^1.0.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",

src/layouts/BaseLayout.js

@@ -1,19 +1,14 @@
 import React from "react";
+import { isBrowser } from "umi";
 import { ConfigProvider, Layout, message, Menu, Dropdown } from "antd";
-import { router } from "umi";
 import zhCN from "antd/es/locale/zh_CN";
 import enUS from "antd/es/locale/en_US";
 import BaseHeader from "./components/BaseHeader";
 import TopMenu from "./components/TopMenu";
 import Footer from "./components/Footer";
-// import headMenuData from "./menuData";
 import yuyanImg from "../assets/icon_yuyan@3x.png";
 import { getLocale } from "../utils";
 import styles from "./BaseLayout.less";
-import locale from "antd/lib/date-picker/locale/en_US";
-// import zhCNConfig from "../locales/zh_CN";
-// import enUSConfig from "../locales/en_US ";
-
 const { Header, Content } = Layout;
 
 const findPrefixSelectedKey = (topMenu, key = "") => {
@@ -26,61 +21,19 @@ const findPrefixSelectedKey = (topMenu, key = "") => {
   return key;
 };
 
-const localeConfig = getLocale();
 class BaseLayout extends React.Component {
   state = {
-    locale: localStorage.getItem("language") || "中文",
+    locale: "",
+    localeConfig: {},
+    headMenuData: [],
   };
 
-  headMenuData = [
-    {
-      key: "/home",
-      text: localeConfig.sy,
-    },
-    {
-      key: "/about-us",
-      text: localeConfig.footerMenu1,
-    },
-    {
-      key: "/product-center",
-      text: localeConfig.footerMenu2,
-      children: [
-        {
-          key: `/product-center?tabCode=1`,
-          text: localeConfig.cp1,
-        },
-        {
-          key: `/product-center?tabCode=2`,
-          text: localeConfig.cp2,
-        },
-        {
-          key: `/product-center?tabCode=3`,
-          text: localeConfig.cp3,
-        },
-        {
-          key: `/product-center?tabCode=4`,
-          text: localeConfig.cp4,
-        },
-        {
-          key: `/product-center?tabCode=5`,
-          text: localeConfig.cp5,
-        },
-      ],
-    },
-    {
-      key: "/technical-support",
-      text: localeConfig.footerMenu3,
-    },
-    {
-      key: "/contact-us",
-      text: localeConfig.footerMenu4,
-    },
-  ];
-
   handleLocaleChange = (val) => {
     if (val !== this.state.locale) {
       this.setState({ locale: val });
-      localStorage.setItem("language", val);
+      if (!isBrowser()) {
+        localStorage.setItem("language", val);
+      }
       window.location.reload();
     }
   };
@@ -109,6 +62,58 @@ class BaseLayout extends React.Component {
       history.push(item.key);
     }
   };
+  componentDidMount() {
+    const val = localStorage.getItem("language") || "中文";
+    const localeConfig = getLocale(val);
+    this.setState({
+      locale: val,
+      localeConfig: localeConfig,
+      headMenuData: [
+        {
+          key: "/home",
+          text: localeConfig.sy,
+        },
+        {
+          key: "/about-us",
+          text: localeConfig.footerMenu1,
+        },
+        {
+          key: "/product-center",
+          text: localeConfig.footerMenu2,
+          children: [
+            {
+              key: `/product-center?tabCode=1`,
+              text: localeConfig.cp1,
+            },
+            {
+              key: `/product-center?tabCode=2`,
+              text: localeConfig.cp2,
+            },
+            {
+              key: `/product-center?tabCode=3`,
+              text: localeConfig.cp3,
+            },
+            {
+              key: `/product-center?tabCode=4`,
+              text: localeConfig.cp4,
+            },
+            {
+              key: `/product-center?tabCode=5`,
+              text: localeConfig.cp5,
+            },
+          ],
+        },
+        {
+          key: "/technical-support",
+          text: localeConfig.footerMenu3,
+        },
+        {
+          key: "/contact-us",
+          text: localeConfig.footerMenu4,
+        },
+      ],
+    });
+  }
 
   componentDidCatch(error) {
     if (process.env.NODE_ENV !== "development") {
@@ -118,13 +123,14 @@ class BaseLayout extends React.Component {
         duration: 2,
         key: "error",
       });
-      router.replace("/exception/500");
+      // router.replace("/exception/500");
       // eslint-disable-next-line no-console
       console.error(error);
     }
   }
 
   render() {
+    const { localeConfig, headMenuData = [] } = this.state;
     const { children, location = {} } = this.props;
     const { pathname = "" } = location;
     const arr = ["/home"];
@@ -160,9 +166,9 @@ class BaseLayout extends React.Component {
               </div>
               <TopMenu
                 selectedKeys={[
-                  findPrefixSelectedKey(this.headMenuData, location.pathname),
+                  findPrefixSelectedKey(headMenuData, location.pathname),
                 ]}
-                data={this.headMenuData}
+                data={headMenuData}
                 onClick={this.handleSideMenuClick}
                 isInherit={isInherit}
               />

src/pages/Home/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { Button, Carousel, Image } from "antd";
 import GreenLine from "../../components/GreenLine";
 import bg1 from "../../assets/img_guanyu@3x.png";
@@ -22,10 +22,12 @@ import styles from "./index.less";
 
 const IndexPage = (props) => {
   console.log(props);
-  const locale = getLocale();
+  const [locale, setLocale] = useState({});
   
   // 测试接口
   useEffect(() => {
+    const val = localStorage.getItem("language") || "中文";
+    setLocale(getLocale(val));
     getData();
   }, []);
 

src/pages/about-us/full-certificate/index.js

@@ -1,6 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
-import { Row, Col } from "antd";
-
 import { getLocale } from "../../../utils";
 import styles from "./index.less";
 import CusBreadcrumb from "../../../components/CusBreadcrumb";
@@ -8,7 +6,6 @@ import CusBreadcrumb from "../../../components/CusBreadcrumb";
 import img1 from "../../../assets/img_zhengshu@3x.png";
 
 const FullCertificate = (props) => {
-  const locale = getLocale();
   const [certificateList, setCertificateList] = useState([
     { url: img1, name: "xxxxxxxxxxxxxxxxxxx CE证书" },
     { url: img1, name: "xxxxx CE证书" },
@@ -19,6 +16,13 @@ const FullCertificate = (props) => {
     { url: img1, name: "xxxxxxxxxxxxxxxxxxx CE证书" },
     { url: img1, name: "xxxxxxxxxxxxxxxxxxx CE证书" },
   ]);
+
+  const [locale, setLocale] = useState({});
+  useEffect(() => {
+    const val = localStorage.getItem("language") || "中文";
+    setLocale(getLocale(val));
+  }, []);
+
   return (
     <div className={styles.root}>
       <CusBreadcrumb

src/pages/about-us/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Divider, Button } from "antd";
 import { getLocale } from "../../utils";
 import styles from "./index.less";
@@ -11,8 +11,12 @@ import img1 from "../../assets/img_guanyuwomen@3x.png";
 import img2 from "../../assets/img_zhengshu@3x.png";
 
 const IndexPage = (props) => {
-  const locale = getLocale();
   const { history } = props;
+  const [locale, setLocale] = useState({});
+  useEffect(() => {
+    const val = localStorage.getItem("language") || "中文";
+    setLocale(getLocale(val));
+  }, []);
 
   const renderItem = ({ imgUrl, name, year, info }, index) => (
     <div

src/pages/agreement/index.js

@@ -1,16 +1,15 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
-import { Divider, Button } from "antd";
 import { getLocale } from "../../utils";
 import styles from "./index.less";
-import GreenLine from "../../components/GreenLine";
 import CusBreadcrumb from "../../components/CusBreadcrumb";
-import PageHeaderInfo from "../../components/PageHeaderInfo";
-
-import img1 from "../../assets/img_guanyuwomen@3x.png";
 
 const IndexPage = (props) => {
-  const locale = getLocale();
   const { history } = props;
+  const [locale, setLocale] = useState({});
+  useEffect(() => {
+    const val = localStorage.getItem("language") || "中文";
+    setLocale(getLocale(val));
+  }, []);
 
   return (
     <div className={styles.root}>

src/pages/contact-us/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Form, Button, Input } from "antd";
 import { getLocale } from "../../utils";
 import styles from "./index.less";
@@ -15,7 +15,11 @@ import img6 from "../../assets/img_ditu@3x.png";
 
 const IndexPage = (props) => {
   const { history } = props;
-  const locale = getLocale();
+  const [locale, setLocale] = useState({});
+  useEffect(() => {
+    const val = localStorage.getItem("language") || "中文";
+    setLocale(getLocale(val));
+  }, []);
 
   const jstdImgList = [
     {

src/pages/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Redirect } from 'umi'
+
+const index = () => <Redirect to="/home" />;
+
+export default index;

src/pages/product-center/detail/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Image } from "antd";
 
 import { getLocale } from "../../../utils";
@@ -13,8 +13,13 @@ import img4 from "../../../assets/img_chanpin_4@3x.png";
 const FullCertificate = (props) => {
   const { location = {} } = props; // activeTab
   const { id, tabName, tabValue } = location?.query || {}; // activeTab
-  const locale = getLocale();
   const [visible, setVisible] = useState(false);
+  const [locale, setLocale] = useState({});
+  useEffect(() => {
+    const val = localStorage.getItem("language") || "中文";
+    setLocale(getLocale(val));
+  }, []);
+
   return (
     <div className={styles.product_detail_root}>
       <CusBreadcrumb

src/pages/product-center/index.js

@@ -1,3 +1,4 @@
+import React, { useState, useEffect } from "react";
 import styles from "./index.less";
 import { Tabs, Empty, Pagination, Divider } from "antd";
 import { getLocale } from "../../utils";
@@ -8,12 +9,14 @@ import img1 from "../../assets/img_chanpinzhongxin@3x.png";
 import img2 from "../../assets/img_chnapin@3x.png";
 import img3 from "../../assets/img_shangbiao@3x.png";
 
-import React, { useEffect, useState } from "react";
-
 const IndexPage = (props) => {
   const { history, location = {} } = props; // activeTab
   const { tabCode = "" } = location?.query || {}; // activeTab
-  const locale = getLocale();
+  const [locale, setLocale] = useState({});
+  useEffect(() => {
+    const val = localStorage.getItem("language") || "中文";
+    setLocale(getLocale(val));
+  }, []);
   const [activeTab, setActiveTab] = useState({});
   const [productList, setProductList] = useState([
     {

src/pages/technical-support/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Divider, Button } from "antd";
 import { getLocale } from "../../utils";
 import styles from "./index.less";
@@ -16,7 +16,11 @@ import img6 from "../../assets/img_jishu_guanli@3x.png";
 
 const IndexPage = (props) => {
   const { history } = props;
-  const locale = getLocale();
+  const [locale, setLocale] = useState({});
+  useEffect(() => {
+    const val = localStorage.getItem("language") || "中文";
+    setLocale(getLocale(val));
+  }, []);
 
   const jstdImgList = [
     {

src/utils.js

@@ -1,7 +1,6 @@
 import zhCNConfig from "./locales/zh_CN";
 import enUSConfig from "./locales/en_US ";
 
-export const getLocale = () => {
+export const getLocale = (language) => {
-  const local = localStorage.getItem("language") || "中文";
+  return language === "中文" ? zhCNConfig : enUSConfig;
-  return local === "中文" ? zhCNConfig : enUSConfig;
 };