我想把我的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
项目是公共的
2条答案
按热度按时间n6lpvg4x1#
有同样的问题。原来
package.json
中的homepage
属性包含不正确的站点URL。你需要在
package.json
的顶部添加这个属性(如果还没有的话),并确保它指向你网站的gitlab pages url。c0vxltue2#
我想澄清Waleed93的答案,因为我刚刚遇到了同样的问题。
Gitlab页面使用以下格式的URL:
https://<username>.gitlab.com/<repository>
react应用的默认设置是页面位于
/
,因此manifest.js将位于/manifest.js
,但现在页面位于/<username>/<repository>
,所以当我们尝试下载/manifest.js
时,实际上遇到了gitlab的验证墙,解决方案是将"homepage": <repository>
添加到package.json