Question 97379 in Nginx Question posted in
The official documentation can be found here.

How to deploy a vue3 application in a apache2 server? – Nginx

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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

    const routes = [
  { path: "/", name: "Home", component: Home },
  { path: "/unidade/:id", name: "Andares", component: UnityHome },
];

    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

    const routes = [
  { path: "/agenda/dist", name: "Home", component: Home },
  { path: "/unidade/:id", name: "Andares", component: UnityHome },
];

  2. 0

    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 your DocumentRoot points to /var/www/html/agenda/dist ?

    Shouldn’t it then point to DocumentRoot /var/www/html/ ?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search