Deployment

Read the documentation carefully, you will learn about how you can deploy the production builds on the server.

To create a production build you need to run the command npm run build. It will create the dist folder, that contains the production build files. Now you just need to upload the dist files on to the server.

Static Server:

To run the production build locally, the easiest way to handle this would be to install serve and let it handle the rest:

npm install -g serve
serve -s dist

You don’t necessarily need a static server in order to run a project in production. It works just as fine as integrated into an existing dynamic one.

Here’s a programmatic example using Node and Express:

server.js

const express = require('express');
const path = require('path');
const app = express();

​app.use(express.static(path.join(__dirname, 'dist')));

​app.get('/', function (req, res) {  
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

​app.listen(9000);

Apache HTTP server:

If you’re using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:

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

Upload the dist files in the public folder.

Building for Relative Paths:

By default, vue-cli 3 produces a build, assuming your app is hosted at the server root. To override this, follow the instructions given below:-

Create a .htaccess file in the sub directory.

Options -MultiViews
RewriteEngine On
RewriteBase /dev/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Open vue.config.js file and change the baseUrl from '/' to '/sub-folder/'

...
module.exports = {
    baseUrl: process.env.NODE_ENV == 'production' ? 'sub-folder' :  '/',
    ...
}

...

Change all static assets path with your directory path e.g. "/static/img/user-1.jpg" with "/sub-folder/static/img/user-1.jpg"

Add base in the router config file, go to the src->router and open index.js file.

// session components
const SignUpOne = () => import('Views/session/SignUpOne');
const LoginOne = () => import('Views/session/LoginOne');
const LockScreen = () => import('Views/session/LockScreen');

const Auth0CallBack = () => import('Components/Auth0Callback/Auth0Callback');

Vue.use(Router)

export default new Router({
	mode: 'history',
	base: '/sub-folder', // add here your sub-directory name
	routes: [
    	...
    ]
})

Run npm run build command.

Upload the dist folder files on the sub-folder directory.

For more information, please check the link below:

Deployment | Vue CLIcli.vuejs.org

That's it, Now your production build will work on the relative path.