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