vue.js

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...

    1. Build your app for production.

      npm run build
      

      Typically, this is done locally in your development environment.

    2. 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>