Deploy VueJS with Nginx on sub-path

A few days ago I had faced a problem with deploying the Vue project with Nginx on its sub-path. Deploying the Vue project on the root path is not a big problem but deploying it on a sub-path can be a nightmare(actually it took my whole day OMG).

So, I wanna share my experience with you guys. Hope this will save your precious night.

Let’s assume our domain will be hackum.com and we wanna deploy our Vue project on hackum.com/app path.

1. The first thing is first we have to change our Vue projects’s public path

Open vue.config.js file which is located in your Vue project. And change publicPath into your sub-path. For our example, it will be publicPath: ‘/app/’. The end slash is important don’t forget it.

publicPath: '/app/',
outputDir: 'dist',
assetsDir: 'static',

2. Build your project

The build command could be different based on your project config. But in most cases, it will be npm run build.

npm run build

You can find your build command from your packages.json. For my case, it will be npm run build:prod for production. If your config doesn’t have those don’t worry npm run build will work fine work you.

"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    },

3. Nginx config

Open your Nginx site config which located in /etc/nginx/sites-available/

Then add those lines into the server block. Don’t forget to change the alias to your project directory

location /app {
                alias /home/hackum/app/dist; 
                try_files $uri /index.html =404;
}

The last thing is to test our config and restart Nginx.

For the test, our config enters the following command.

sudo nginx -t

if everything is okay it will say ‘test is successful’ if not you have to fix a problem before restart it.

If everything is okay then restart Nginx with the following command.

sudo systemctl restart nginx

That's it, thank you for your attention. Hope this helps you.

My youtube channel