How Can I Deploy A Vue.js App On A Tomcat?

I have a vue.js application and I want to deploy it on a server on a tomcat, it's posible and how ?

Solution 1:

Yes of course you can, an extended tomcat app server has a structure like this:

[it is supposed that you are going to deploy a static application into tomcat]

apache-tomcat-x.y.zz/ bin/ conf/ lib/ logs/ temp/ webapps/ work/ ....

just create a folder in weapps folder[e.g test] and put your static files inside it[just remember to take care of your relative path of resources], then fire up tomcat and in your browser refer to a link like this: http://localhost:8080/test/your_index_file.html

However there is point with is worth mentioning, actually tomcat is a web server[to be more precise it's a servlet container which is used to deploy java web applications into it], you should use a http sever somethig like apache_http_server or nginx.

Solution 2:

The diferente is that in tomcat your application will have a context. So, let's suppose that "app-name" in the context of your application inside tomcat.

1o - Create a VUE_APP_PUBLIC_PATH = '/app-name/' variable in the .env.prod file. ("prod" is the default name for production environment)

2o - create a vue.config.js in root of the project and configure the publicPath

module.exports = {
    publicPath: process.env.VUE_APP_PUBLIC_PATH
};

3o - In the router configuration file, define the base url for the same value

let router = new Router({
    mode: 'history',
    base: process.env.VUE_APP_PUBLIC_PATH,
    ...
}

4o - execute "npm run build:prod" command (to load the production environment values)

5o - rename the "dist" directory generated by npm to "app-name"

6o- Copy "app-name" to apache-tomcat-x.x.xx/webapps dir.

7o- At last, access: http://url:port/app-name. If the Vue application is in localhost 8080 port, access http://localhost:8080/app-name.