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:
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:
const Auth0CallBack = () => import(‘Components/Auth0Callback/Auth0Callback’);
That’s it, Now your production build will work on the relative path.