deploy vue js to shared hosting

  1. Build the Vue.js Application: Execute the command npm run build in your Vue.js project directory. This action generates a production-ready build of your application.

  2. Transfer Files to Hosting Space: Access the 'dist' directory created after the build. Upload the contents of this directory to the root folder of your shared hosting space using FTP or cPanel's File Manager.

  3. Adjust Configuration (if necessary): If your Vue.js application uses client-side routing and you encounter issues with refreshing pages, create or modify the .htaccess file in the root directory. Add the configuration to redirect requests to the main 'index.html' file:

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

  4. Set Base URL (if required): Modify the baseUrl property in your Vue.js project's 'vue.config.js' file to match your hosting environment:

    javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-app-name/' : '/' }

  5. Configure Hosting Settings: Ensure your shared hosting service supports serving Vue.js applications and has necessary server configurations (like Node.js or special server setups for SPA) if your Vue app relies on them.

  6. Test Your Application: Visit your hosting domain in a web browser to verify if your Vue.js application loads correctly without any errors.

  7. Address Common Issues: In case of any issues, check the browser console for errors and inspect the network tab to identify and resolve any problems related to file paths or server configurations.