CODEWITHSUNDEEP
vue.js
yvl
yvl

Reputation: 660

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

Upvotes: 3

Views: 3074

Answers (2)

James Erikson
James Erikson

Reputation: 63

The other answer is great, but this is even easier...

Point your domain to the dist folder :)

In cPanel for instance, you can go to Domains, then edit the domain. Change the Document Root to have this at the end:

/dist/

Also make a .htaccess file in the dist folder and put this so that urls will redirect to the index.html file (like example.com/path without the below code, path wont pass to index.html):

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

Everytime you run the "npm run build" command, it will replace everything in that directory and delete your .htaccess file... To make it easier and to keep the .htaccess from being lost:

  • Create a .htaccess file in the "src" folder with the above contents
  • Change your "package.json" file and add this to the "scripts" directive:
"postbuild": "cp src/.htaccess dist/.htaccess"

This is what I did and it worked.

Upvotes: -1

Phil
Phil

Reputation: 164731

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/ [email protected]:/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>

Upvotes: 3

Related Questions