Tomcat deploys front-end vue project steps (specific operations for project launch)

1. Install and deploy tomcat under Linux system

Installing tomcat on Linux can directly download tomcat on the linux server through wget, or upload local tomcat to the server.
The specific operation steps are as follows:

• Create a tomcat directory, the location can be selected according to your own situation

mkdir /usr/local/tomcat

• Copy the uploaded tomcat to the above directory

cp apache-tomcat-7.0. /usr/local/tomcat/

• Enter the tomcat directory

cd /usr/local/tomcat/

• Unzip tomcat

tar -zxvf apache-tomcat-7.0.

• Enter the bin directory of tomcat

cd /usr/local/tomcat/apache-tomcat-7.0.77/bin/

• Start tomcat

./

• Close tomcat

./

2. Deploy vue projects in tomcat

• Delete all files under tomcat directory\webapps\ROOT
• npm run build package vue project (depending on different project packaging methods)
• Copy the generated dist folder to the \webapps\ROOT directory
• Create a new WEB-INF folder in the ROOT directory and create a new WEB-INF folder, and paste the following content

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="/xml/ns/javaee" xmlns:xsi="http:///2001/XMLSchema-instance"
    xsi:schemaLocation="/xml/ns/javaee
                      /xml/ns/javaee/web-app_3_1.xsd"
    version="3.1" metadata-complete="true">
    <display-name>Router for Tomcat</display-name>
    <error-page>
        <error-code>404</error-code>
        <location>/dist/</location>
    </error-page>
</web-app>

5. Start tomcat and access localhost:8080/dist

Attachment: The Vue project will display a blank page after it is deployed to tomcat:

1. Modify config/file

Change assetsPublicPath under build: '/' to './', note that it is under build, not dev

 = {
    dev: {
        ...
    },
    build: {
        ...
        // Modify assetsPublicPath: '/',        assetsPublicPath: './',
        ...
    }
}

/

Set the root path of the access project in the routing table and set the base property:

export default new Router({
    routes: constantRouterMap,
    // mode: 'history', // backend support can be opened    base:'/myvue/',     //The root directory of the package project})

3. Package and deployment

Copy the files in the dist folder to tomcat/webapps/myvue to start the service and solve the problem.

Summarize

This is the article about the deployment of the front-end vue project of tomcat. For more related content of the front-end vue project of tomcat deployment, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!