Search code examples
vue.jsapachexamppvuejs3vite

Deploying a Vite Vuejs app to Apache server

I am using xampp apache server on a local machine.

I tried npm run preview and serve -s dist. It can be access but u have to put a port after the project name localhost:3000 something like this.

I also tried copying the dist folder to another folder in xampps htdocs (system_name) system_name/dist. I want to access like localhost/system_name. When I tried to access it, it produces white screen. I already configured .htaccess and double checked src and href pointing at js and css files.

My htaccess file also looks like this.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]
RewriteCond %{REQUEST_URI} index.html$1

This is the actual document root path (where the dist files are copied, index.html, assets and .htaccess)

C:/xampp/htdocs/production/

This is also the contents of the index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/production/assets/denr-cdf828ad.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NGPDBS</title>
    <script type="module" crossorigin src="/production/assets/index-c66d07a1.js"></script>
    <link rel="stylesheet" href="/production/assets/index-5f93e947.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

My vite.config.js file looks like this

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  base: '/production/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

When I access it on my browser (localhost/production) it gives me white screen but the icon logo can be seen besides the Title. There are also no errors in the console.

Is there any way to do this?

Solution

  • If you're intending to serve your application under a sub-directory like system_name, you'll need to configure Vite to build your app using a Public Base Path

    If you are deploying your project under a nested public path, simply specify the base config option and all asset paths will be rewritten accordingly.

    // vite.config.js
export default {
  base: '/production/',
};

    You would then rebuild your app and copy / move the contents of the dist folder to the relevant location in your Apache document root. For example

    cp -a dist/. /var/www/html/production/

    Assuming you're using Vue Router with web history, you'll also need to configure the base parameter passed to createWebHistory()...

    import { createRouter, createWebHistory } from 'vue-router'

createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    /* ... */
  ],
})