I’m trying to make a vue3 app run in a apache2 server, I did apache configuration of the site in sites-available and also did the symlink to sites-enabled. I don’t have the ServerName ready bc I wanted to test it using the direct path from /var and when it’s ready use the DNS. Here is the file:
<VirtualHost *:80>
# ServerName xyz.example.com.br
# ServerAlias xyz.example.com.br
ServerAdmin webmaster@localhost
DocumentRoot /var/www/html/agenda/dist
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
and my app is at var/www/html with the dist folder generated from yarn run build, as it is referenced in the file above. Here is the index.html from the dist folder:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/hrg.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Agenda Eletrônica</title>
<script type="module" crossorigin src="./assets/index.02c23677.js"></script>
<link rel="stylesheet" type="text/css" href="./assets/index.db6e77a5.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
I added the dot before the href links because otherwise it interprets as the files are located at the /, not /dist (at least it was happening with the js file).
Anyways it just does not work. When I access the IP of the server followed by /agenda/dist it does not show anything, only favicon is loaded. It also doesn’t bring any errors on browser console.
I would try to use nginx, but we do not use it here so I would like to keep it that way and only use it if necessary (maybe that’s the case).
P.S: I’m using vite
2
Answers
I found the solution and I will leave it here if more people get stuck on it.
I am using Vue Router and in the index there are only two routes
As I didn't have the DNS ready and was trying to access it direct from /var path, as it is not a valid route in this file it does not show anything. Now with the DNS it works, because it is the correct path.
So just use a DNS already or change the route file to, in my case, /agenda/dist
I guess, you problem has nothing to do with Vue3 and is based on the improper apache2 configuration.
I am not sure, since I have configured apache2 for 10 years at least, but if your app is in
/var/www/html
then why yourDocumentRoot
points to/var/www/html/agenda/dist
?Shouldn’t it then point to
DocumentRoot /var/www/html/
?