reactjs 将react应用部署到gitlab页面后得到一个空白白色页

woobm2wo  于 2023-03-01  发布在  React
关注(0)|答案(2)|浏览(214)

我想把我的react应用程序(不是create-react-app,用skratch编译的)部署到gitlab页面,所有的任务都成功通过了,但是页面不能正常工作,我只有一个空白的白色页。
我的.gitlab-ci.yml

stages:
  - build
  - deploy

build:
  image: node:latest    
  stage: build
  script:
    - npm install   
    - npm run build
  artifacts:
    paths:
      - build/          

pages:
  image: alpine:latest
  stage: deploy
  variables:
    GIT_STRATEGY: none 
  script:
    - mv build public      
    - cd public 
  artifacts:
    paths:
      - public

我的webpack,我将common与prodd合并
webpack.common.js

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'] 
    },
    entry: {
        index: './src/index.tsx'
    },
    output: {
        filename: "[name].[chunkhash].js",
        chunkFilename: "[name].[chunkhash].js",
        path: path.resolve(__dirname, "public"),
        publicPath: "/"
      },
    plugins: [
        new MiniCssExtractPlugin({ filename: '[name].[contenthash].css', chunkFilename: '[name].[contenthash].css' }),
        new HtmlWebpackPlugin({
            template: "src/index.html",
            inject: "body",
            minify: {
              minifyCSS: true,
              minifyJS: true,
              collapseWhitespace: true
            }
          }),
    ],
    module: {
        rules: [
            {
                test: /\.(css|scss|sass)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/i,
                use: ['file-loader']
            },
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /(node_modules|bower_components|prod)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript']
                    }
                }
            }
        ]
    }
}

webpack.prod.js

module.exports = merge(common, {
    mode: 'production',
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                test: /\.js(\?.*)?$/i,
             })],
        moduleIds: 'deterministic',
        runtimeChunk: 'single',
        splitChunks: {
            name: 'runtime',
            chunks: 'all'
        }
    }
})

package.json

"scripts": {
        "start": "webpack-dev-server --config webpack.dev.js --open",
        "build": "webpack --config webpack.prod.js"
    },

正如我提到的,本地工作正常,无论是开发服务器还是构建。
我没有控制台错误,只有一个警告:
权限策略标题出错:无法识别的功能:“兴趣小组”。
以及
跨源读取阻止(CORB)阻止了MIME类型为text/html的跨源响应https://gitlab.com/users/sign_in。有关详细信息,请参阅https://www.chromestatus.com/feature/5629709824032768
我注销了,登录时显示401 err
获取https://projects.gitlab.io/auth?code=2....net::错误_已中止401
项目是公共的

n6lpvg4x

n6lpvg4x1#

有同样的问题。原来package.json中的homepage属性包含不正确的站点URL。
你需要在package.json的顶部添加这个属性(如果还没有的话),并确保它指向你网站的gitlab pages url。

{
   "homepage": "GITLAB_PAGES_URL",
   "name": "...",
   ...
}
c0vxltue

c0vxltue2#

我想澄清Waleed93的答案,因为我刚刚遇到了同样的问题。
Gitlab页面使用以下格式的URL:https://<username>.gitlab.com/<repository>
react应用的默认设置是页面位于/,因此manifest.js将位于/manifest.js,但现在页面位于/<username>/<repository>,所以当我们尝试下载/manifest.js时,实际上遇到了gitlab的验证墙,解决方案是将"homepage": <repository>添加到package.json

相关问题