running vue in VPS with 80 port

I am having some problem about running vue app. I can't displays hello world component. Vue's index.html is there. but hello world component is not coming inside the app.js

UPDATED

I followed these steps so far, I created a project on this path: /var/www/myapp

Then I open port:80 and make virtual for that

<VirtualHost *:80>
    DocumentRoot /var/www/myapp
    <Directory /var/www/myapp>
        AllowOverride All
    </Directory>
</VirtualHost>

I go into project folder and did npm run serve and npm run build too. And vue start to run at localhost like below.

 App running at:
  - Local:   http://localhost:8080/ 
  - Network: unavailable

Then inside package.json I added host and the port in "serve":

"serve": "vue-cli-service serve --host my-ip --port 80",

But when I run npm run serve command. Vue running the project port 81? if I change the port 81. then vue start to run port 82 it's like vue running away :)

So I also create vue.config.js file.

module.exports = {
    devServer: {
        open: process.platform === 'myapp',
        host: 'my-ip',
        port: 80, 
        https: true,
        hotOnly: false,
    },
}

But i didn't worked out either. I only see empty page on the screen. and when I use npm run serve or npm run build it start to run the project port 81 or else...

Solution

To deploy a Vue app built with Vue CLI v3 to an Apache server, follow these steps...

Build your app for production.
```
npm run build
```
Typically, this is done locally in your development environment.
Copy the contents of the dist folder to your Apache / virtual-host document root.

In your case this appears to be /var/www/myapp. Since you mentioned a VPS, you would need to use some sort of file transfer tool like rsync (CLI) or if you're on Windows and prefer a GUI, I recommend WinSCP.
```
rsync -hrvz --delete dist/ you@your.vps.address:/var/www/myapp/
```

If you're using Vue Router with HTML5 History Mode, you'll also need to enable URL rewriting by adding this to your <VirtualHost> config or to a .htaccess file in the document root.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

_{From https://router.vuejs.org/guide/essentials/history-mode.html#apache}

Update

If you're intent on hosting source files in your production system and building your app there, the simple solution is to point the virtual-host DocumentRoot at the dist folder, eg

<VirtualHost *:80>
    DocumentRoot /var/www/myapp/dist
    <Directory /var/www/myapp/dist>
        AllowOverride All
    </Directory>
</VirtualHost>