修复资源的路径错误

config/webpack.config.prod.js

@@ -43,7 +43,7 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
 // To have this structure working with relative paths, we have to use custom options.
 const extractTextPluginOptions = shouldUseRelativeAssetPaths
   ? // Making sure that the publicPath goes back to to build folder.
-    { publicPath: Array(cssFilename.split('/').length).join('../') }
+  { publicPath: Array(cssFilename.split('/').length).join('../') }
   : {};
 
 // This is the production configuration.
@@ -90,7 +90,7 @@ module.exports = {
     // for React Native Web.
     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
     alias: {
-      
+
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
@@ -121,7 +121,7 @@ module.exports = {
             options: {
               formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
-              
+
             },
             loader: require.resolve('eslint-loader'),
           },
@@ -149,7 +149,7 @@ module.exports = {
             include: paths.appSrc,
             loader: require.resolve('babel-loader'),
             options: {
-              
+
               compact: true,
             },
           },
@@ -192,6 +192,29 @@ module.exports = {
                         // https://github.com/facebookincubator/create-react-app/issues/2677
                         ident: 'postcss',
                         plugins: () => [
+                          require('postcss-px-to-viewport')({
+
+                            unitToConvert: 'px', //需要转换的单位，默认为"px"
+                            viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度
+                            viewportHeight: 667,//视窗的高度，根据375设备的宽度来指定，一般指定667，也可以不配置
+                            unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
+                            propList: ['*'], // 能转化为vw的属性列表
+                            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
+                            fontViewportUnit: 'vw', //字体使用的视口单位
+                            selectorBlackList: ['.ignore-', '.hairlines'], //指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
+                            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
+                            mediaQuery: false, // 允许在媒体查询中转换`px`
+                            replace: true, //是否直接更换属性值，而不添加备用属性
+                            exclude: [
+                              /RightBar/,
+                              /gotop.vue/,
+                            ], //忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+                            landscape: false, //是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
+                            landscapeUnit: 'vw', //横屏时使用的单位
+                          }
+
+
+                          ),
                           require('postcss-flexbugs-fixes'),
                           autoprefixer({
                             browsers: [
@@ -274,7 +297,7 @@ module.exports = {
       },
       mangle: {
         safari10: true,
-      },        
+      },
       output: {
         comments: false,
         // Turned on because emoji and regex is not minified properly using default

package.json

@@ -48,7 +48,7 @@
     "webpack-manifest-plugin": "1.3.2",
     "whatwg-fetch": "2.0.3"
   },
-  "homepage": "http://www.i728.top/pages/11",
+  "homepage": ".",
   "scripts": {
     "dev": "node scripts/start.js",
     "build": "node scripts/build.js",

src/router/index.js

@@ -8,12 +8,7 @@ import {BrowserRouter, HashRouter, Switch, Route, Redirect} from 'react-router-d
 import {asyncComponent} from '../utils/asyncComponent';
 
 const routes = [
-    {
-        path: '/',
-        exact: true,
-        component: asyncComponent(() => import('../views/videoKindList/videoKindList'))
-        
-    },
+
         {
         path: '/videoKindList',
         exact: true,

src/views/videoKindList/videoKindList.css

@@ -17,6 +17,10 @@
     position: relative;
   
 }
+.list-item-img{
+    width: 100%;
+    height: 100%;
+}
 .list-item-text{
     color: white;
     position: absolute;

src/views/videoKindList/videoKindList.js

@@ -80,7 +80,7 @@ class VideoKindListViews extends Component {
                     {
                         this.state.list.map((item, index) => {
                             return (<div className="list-item" key={index}>
-                                <img src={item.image} alt="图片" />
+                                <img className="list-item-img" src={item.image} alt="图片" />
                                 <span  className="list-item-text top54 ">{item.title}</span>
                                 <span  className="list-item-text top128 left40">《视频讲解》</span>
                             </div>)