How to set the correct path for custom domain for gitlab pages with vuejs?

Question

I want to set up my custom domain for my gitlab page

I set up my vuejs project as with .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

and I added a vue.config.js file containing

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

Further I was able to set up the my custom domain following the this guide.

my project page is opening fine at https://<userName>.gitlab.io/<ProjectName>/

but when I use my custom domain <myDomain>.com the page is blank. When I inspect the page

I see the following message

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.

now when I open the site without the project name https://<myDomain>.com/css/app.a4f1ea2f.css. the content of the compressed css is displayed.

when I take out publicPath: process.env.NODE_ENV === "production" ? "/<ProjectName>/" : "/", then https://<myDomain>.com works but https://<userName>.gitlab.io/<ProjectName>/ does not work anymore.

Therefore I assume there is an issue with the path. Namely the <ProjectName> causes most likely the problem. How do I set the page correctly? How can I use both domain?

If your app should be accessible on `.com` , leave the `publicPath` as `"/"` — Michal Levý, Apr 09 '21 at 15:26
But that would mean that the `https://.gitlab.io//` will not ne accessible — A.Dumas, Apr 09 '21 at 15:41

score 1 · Answer 1 · answered Apr 09 '21 at 16:27

When the same app should be accessible on two different domains - in the root of one and on subpath on the other - only solution is probably setting publicPath to relative path

Vue CLI documentation

The value (publicPath) can also be set to an empty string ('') or a relative path (./) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.

The point is if your site uses relative link without leading slash, it should be interpreted by the browser as a path relative to the current path (source) and as a result, you can deploy under any public path...

How to set the correct path for custom domain for gitlab pages with vuejs?

1 Answers1