Vue || How To Build & Deploy A Vue Site/App For Production Under A Web Hosting Environment

January 17, 2021 admin No comments

The following page demonstrates how to build and deploy a Vue site/app for production under a shared hosting environment.

Note: This page assumes you already have a domain and hosting plan setup. It also assumes your project is completed and ready to be deployed. For an overview on how to get started with Vue, visit the official documentation.

Contents

1. Build The Project 2. Deploy Site 3. Deploy Site - Subfolder 4. Server Configuration - HTML5 History Mode

1. Build The Project

The first step is to build the project for production. This can be achieved by a simple command.

First, navigate to the project directory in the terminal, then type one of the following commands depending on your package manager.

NPM:

npm run build

Yarn:

yarn build

Once this process is complete, in your project directory you will see a new folder named ‘dist‘. This dist folder will contain the files that are needed to upload to the server.

The ‘dist‘ folder should contain something like the following:

• css - [folder] • img - [folder] • js - [folder] • favicon.ico - [file] • index.html - [file]

2. Deploy Site

The files generated in Step 1 contained in the ‘dist‘ folder can be uploaded to your server using any method familiar to you.

On your server, the public_html directory is typically where you would place the files, which is the document root folder for your primary domain name.

Once the files are uploaded, your site should be live!

3. Deploy Site – Subfolder

If you wish to deploy your site into a subfolder (i.e: site.com/your-subfolder/), this can be done by making only a few changes!

Before you build your project (as highlighted in Step 1), it needs to be updated to point to the subfolder as the ‘base’ path. This is configured in the vue.config.js file.

If this file doesn’t already exist in your project, you can create it. It should be placed in the root directory of your project.

Next, add the following to the vue.config.js file:





		
		
			vue.config.js
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Jan 17, 2021
//    Taken From: http://programmingnotes.org/
//    File:  vue.config.js
//    Description: Adds additional options to the site config
// ============================================================================ 
module.exports = {
    // Project deployment base
    // By default we assume your app will be deployed at the root of a domain,
    // e.g. https://www.my-app.com/
    // If your app is deployed at a sub-path, you will need to specify that
    // sub-path here. For example, if your app is deployed at
    // https://www.foobar.com/my-app/
    // then change this to '/my-app/'
    publicPath: process.env.NODE_ENV === 'production' ? '/your-subfolder/' : '/',

}// http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Jan 17, 2021
//    Taken From: http://programmingnotes.org/
//    File:  vue.config.js
//    Description: Adds additional options to the site config
// ============================================================================ 
module.exports = {
    // Project deployment base
    // By default we assume your app will be deployed at the root of a domain,
    // e.g. https://www.my-app.com/
    // If your app is deployed at a sub-path, you will need to specify that
    // sub-path here. For example, if your app is deployed at
    // https://www.foobar.com/my-app/
    // then change this to '/my-app/'
    publicPath: process.env.NODE_ENV === 'production' ? '/your-subfolder/' : '/',
 
}// http://programmingnotes.org/

If you are using Vue Router in your project, make sure to update the related base property of the router.

This can be done by updating the router index.js like so:





		
		
			index.js
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Jan 17, 2021
//    Taken From: http://programmingnotes.org/
//    File:  index.js
//    Description: Router index file which sets up the routes for the project
// ============================================================================ 
import { createWebHistory, createRouter } from 'vue-router';

let routes = [];

// This sets the base url using the 'publicPath' property from vue.config.js
const router = createRouter({
    history: createWebHistory( process.env.BASE_URL ),
    routes
});

export default router; // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Jan 17, 2021
//    Taken From: http://programmingnotes.org/
//    File:  index.js
//    Description: Router index file which sets up the routes for the project
// ============================================================================ 
import { createWebHistory, createRouter } from 'vue-router';
 
let routes = [];
 
// This sets the base url using the 'publicPath' property from vue.config.js
const router = createRouter({
    history: createWebHistory( process.env.BASE_URL ),
    routes
});
 
export default router; // http://programmingnotes.org/

After the changes above are applied, follow the steps highlighted in Step 1 to build your project.

Next, upload the files generated in the ‘dist‘ folder into the subfolder directory on your server. The files can be uploaded using any method familiar to you.

Once the files are uploaded, your site should be live!

4. Server Configuration – HTML5 History Mode

When using Vue Router with HTML5 history mode, without a proper server configuration, users will get a 404 server error if they access ‘http://yoursite.com/user/id’ directly in their browser.

To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn’t match any static assets, it should serve the same index.html page that your app lives in.

For example, if using Apache, this is configured in the .htaccess file.

If this file doesn’t already exist, you can create it. It should be placed in the same directory as your apps index.html file.

Next, add the following to the .htaccess file:





		
		
			Server Configuration
			
Apache
			
			# ============================================================================
#    Author: Kenneth Perkins
#    Date:   Jan 17, 2021
#    Taken From: http://programmingnotes.org/
#    File:  .htaccess
#    Description: Catch all server fallback for routes in a app
# ============================================================================ 
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>
# http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
				
						# ============================================================================
#    Author: Kenneth Perkins
#    Date:   Jan 17, 2021
#    Taken From: http://programmingnotes.org/
#    File:  .htaccess
#    Description: Catch all server fallback for routes in a app
# ============================================================================ 
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>
# http://programmingnotes.org/

If your app is deployed in a subfolder, using Apache, this is also configured in the .htaccess file.

If this file doesn’t already exist, you can create it. It should be placed in the same directory as your apps index.html file.

Next, add the following to the .htaccess file:

Note: Replace ‘[[[your-subfolder]]]‘ with the subfolder name where your app resides.





		
		
			Server Configuration - Subfolder
			
Apache
			
			# ============================================================================
#    Author: Kenneth Perkins
#    Date:   Jan 17, 2021
#    Taken From: http://programmingnotes.org/
#    File:  .htaccess
#    Description: Catch all server fallback for routes in a subfolder app
# ============================================================================ 
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /[[[your-subfolder]]]/index.html [L]
</IfModule>
# http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
				
						# ============================================================================
#    Author: Kenneth Perkins
#    Date:   Jan 17, 2021
#    Taken From: http://programmingnotes.org/
#    File:  .htaccess
#    Description: Catch all server fallback for routes in a subfolder app
# ============================================================================ 
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /[[[your-subfolder]]]/index.html [L]
</IfModule>
# http://programmingnotes.org/

For more example configurations, visit the official documentation for more information!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Was this article helpful?

👍 YesNo

Posted in: JavaScript, Vue Tags: javascript, vue, vue deploy, vue router

Vue || How To Build & Deploy A Vue Site/App For Production Under A Web Hosting Environment

Related

Leave a ReplyCancel reply

Search

Compile Your Code Now

Translate Page

Popular Pages

Recent

Archives

Categories