{"id":270,"date":"2019-09-02T07:30:26","date_gmt":"2019-09-02T07:30:26","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/vuely\/?page_id=270"},"modified":"2019-10-19T07:20:50","modified_gmt":"2019-10-19T07:20:50","slug":"deployment","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/vuely\/deployment\/","title":{"rendered":"Deployment"},"content":{"rendered":"\n

To create a production build you need to run the command npm run build<\/code>. It will create the dist<\/code> folder, that contains the production build files. Now you just need to upload the dist<\/code> files on to the server.<\/p>\n\n\n\n

Static Server:<\/h6>\n\n\n\n

To run the production build locally, the easiest way to handle this would be to install serve<\/a> and let it handle the rest: <\/p>\n\n\n\n

npm install -g serve
serve -s dist<\/pre>\n\n\n\n
You don\u2019t 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.<\/p>\n\n\n\n
Here\u2019s a programmatic example using Node<\/a> and Express<\/a>:<\/p>\n\n\n\n
const express = require('express');
const path = require('path');
const app = express();
 
\u200bapp.use(express.static(path.join(__dirname, 'dist')));
 
\u200bapp.get('\/', function (req, res) {  
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
 
\u200bapp.listen(9000);<\/pre>\n\n\n\n
Apache HTTP server:<\/h6>\n\n\n\n
If you\u2019re using Apache HTTP Server<\/a>, you need to create a .htaccess<\/code> file in the public<\/code> folder that looks like this:<\/p>\n\n\n\n
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
<\/pre>\n\n\n\n
Upload the dist<\/code> files in the public folder.<\/p>\n\n\n\n
Building for Relative Paths:<\/h6>\n\n\n\n
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:-<\/p>\n\n\n\n
Create a .htaccess<\/code> file in the sub directory.<\/p>\n\n\n\n
Options -MultiViews
RewriteEngine On
RewriteBase \/dev\/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]<\/pre>\n\n\n\n
Open vue.config.js<\/code> file and change the baseUrl<\/code> from '\/'<\/code> to '\/sub-folder\/'<\/code><\/p>\n\n\n\n
...
module.exports = {
    baseUrl: process.env.NODE_ENV == 'production' ? 'sub-folder' :  '\/',
    ...
} 
...<\/pre>\n\n\n\n
Change all static assets path with your directory path e.g. \"\/static\/img\/user-1.jpg\"<\/code> with \"\/sub-folder\/static\/img\/user-1.jpg\"<\/code><\/p>\n\n\n\n
Add base in the router config file, go to the src->router<\/code> and open index.js<\/code> file.<\/p>\n\n\n\n
\/\/ 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: [
         \u2026
     ]
 })<\/pre>\n\n\n\n
Run npm run build<\/code> command.<\/p>\n\n\n\n
Upload the dist<\/code> folder files on the sub-folder directory.<\/p>\n\n\n\n
For more information, please check the link below:<\/p>\n\n\n\n
const Auth0CallBack = () => import(‘Components\/Auth0Callback\/Auth0Callback’);<\/p>\n\n\n\n
\n\t\n\t\t
\n\t\t\t
Deployment | Vue CLI<\/h6>\n\t\t\t
\ud83d\udee0\ufe0f Standard Tooling for Vue.js Development<\/p>\n\t\t\tcli.vuejs.org<\/small>\n\t\t<\/div>\n\t<\/a>\n<\/div>\n\n\n\n
That’s it, Now your production build will work on the relative path.<\/p>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n        <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    1<\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":14,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/270"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/comments?post=270"}],"version-history":[{"count":10,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/270\/revisions"}],"predecessor-version":[{"id":603,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/270\/revisions\/603"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/media?parent=270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}