如何使用vuejs为gitlab页面的自定义域设置正确的路径

Question

我想为我的gitlab页面设置我的自定义域

我将我的vuejs项目设置为使用.gitlab-ci.yml

pages:
image: node:latest
stage: deploy
script:
- npm install --progress=false
- npm run build
- rm -rf public
- mkdir public
- cp -r dist/* public
artifacts:
expire_in: 1 day
paths:
- public
only:
- master

我添加了一个包含的vue.config.js文件

module.exports = module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "/<ProjectName>/" : "/",
};

此外，我能够按照本指南设置我的自定义域。

我的项目页面在https://<userName>.gitlab.io/<ProjectName>/上打开得很好

但是当我使用我的自定义域<myDomain>.com时，页面是空白的。当我检查页面时

我看到以下消息

Refused to apply style from 
'https://<myDomain>.com/<ProjectName>/css/app.a4f1ea2f.css' 
because its MIME type ('text/html') is not a 
supported stylesheet MIME type, and strict MIME checking is enabled.

现在，当我打开没有项目名称https://<myDomain>.com/css/app.a4f1ea2f.css的网站时。显示压缩css的内容。

当我取出publicPath: process.env.NODE_ENV === "production" ? "/<ProjectName>/" : "/",时，https://<myDomain>.com工作，但https://<userName>.gitlab.io/<ProjectName>/不再工作。

因此，我认为路径存在问题。也就是说，<ProjectName>最有可能导致问题。如何正确设置页面？如何同时使用这两个域？

Answer 1

当同一个应用程序应该在两个不同的域上访问时——在一个域的根上和另一个域上的子路径上——唯一的解决方案可能是将publicPath设置为相对路径

Vue CLI文档

值(publicPath(也可以设置为空字符串(''(或相对路径(./(，以便使用相对路径链接所有资产。这允许构建的捆绑包部署在任何公共路径下，或在基于文件系统的环境中使用，如Cordova混合应用程序。

关键是，如果您的网站使用没有前导斜杠的相对链接，浏览器应该将其解释为相对于当前路径(源(的路径，因此，您可以在任何公共路径下部署。。。