Vue-cli project deployment and online process

1. Install tomcat

Download and install Tomcat to see this

2. Create the vue.config.js file

Create a file in the project root directory and name it vue.config.js
Insert picture description here

3. Write the content of vue.config.js

//部署上线的配置
module.exports = {
    
    
    outputDir : 'competition',//打包后的文件夹名,默认disk
    assetsDir : './src/assets',//静态文件的目录(如照片)
    publicPath : '',//公共路径
}

Insert picture description here

4. Modify the routing method of src/router/index.js

The history method requires additional configuration on the server, but not for hash
Insert picture description here

5. src/router/index.js adds an empty path jump, that is, access to the project default jump to the login interface (or home page)

Insert picture description here

6. Package deployment

The result of running the command npm run build
Insert picture description here
: The package file name set in the previous vue.config.js file is generated in the project root directory
Insert picture description here

7. Put the generated folder into the webapp directory under Tomcat of the server

Insert picture description here

8. Visit http://xxx (domain name or IP address): xxx (port number)/xxx packaged folder name

For example: http://127.0.0.1:8080/competition
access automatically jumps to the login interface/home page
Insert picture description here

Guess you like

Origin blog.csdn.net/qq_42301302/article/details/105122829