Introduction:
Deploying Vue Js build to the root path in any web server is everyone known thing. But when it comes to deploying it in a subfolder of your webserver is a little bit headache. The reason is when we configure the subfolder path in the Vue app. It can control the routing in the front end. But it can't go to the correct page when it gets refreshed as it is a front end app.
In this article, you can learn how to set up in Vue app configuration for front-end and apache configuration to set up in the backend. So that your app can run without any page not found error when the users refresh your Vue app.
STEP 1: Setting up in the Vue app.
change the publicPath in your Vue Js config file. (/vue.config.js)
module.exports = {
publicPath: '/subfolder-name/',
assetsDir: ''
}
make sure you have added slash in front and back.
Go to your Vue JS router file. (/src/router/index.js)
make the below changes for subfolder routing in the front-end. mode should be history.
const router = new VueRouter({
mode: 'history',
base: 'subfolder-name',
routes
})
export default router
STEP 2: Setting up routing in the webserver subfolder to the index page.
In your server subfolder(Vue app build folder) add the htaccess file with the below configuration.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /subfolder-name
RewriteRule ^subfolder-name/index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /subfolder-name/index.html [L]
</IfModule>
STEP 3: Activate mod rewrite & htaccess in apache.
Ubuntu server:
Enable rewrite in apache
sudo a2enmod rewrite
open default config file in apache
sudo vi /etc/apache2/sites-available/000-default.conf
Add the following code to activate the htaccess file to take effect in the webserver.
<Directory /var/www/>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require all granted
</Directory>
Restart the apache server to take effect for the above changes.
sudo systemctl restart apache2
Centos 7 server:
Enable rewrite in apache. Open base file.
sudo vi /etc/httpd/conf.modules.d/00-base.conf
uncomment the below line the file and save it and exit(enter :wq).
LoadModule rewrite_module modules/mod_rewrite.so
open conf file
sudo vi /etc/httpd/conf/httpd.conf
Add the below code:
<Directory /var/www/>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require all granted
</Directory>
Restart apache server:
sudo systemctl restart httpd
Comments
Post a Comment