Adam said:
When writing the spring-boot project before, the jsp page written directly was directly packaged into a war package to run. Tomcat is used, and it is simple and convenient, but the fly in the ointment is that the animation demonstration and the page cannot be very beautiful. Since I started writing projects (microservices, etc.) that separate front and back ends, I found that element-ui is really easy to use. Now when I want to package and deploy the vue project on my own server, I found some differences. After two days of study and hard work, I learned some experience. Summarize an article for everyone. It is convenient for everyone, and I also want you to avoid some detours (like me).
I reinstalled one of my servers here, and it will be used exclusively for the front desk in the future.
I found that tomcat can be directly selected on Alibaba Cloud’s server and it also comes with nginx, so Adan is welcome!
Introduction to tomcat and nginx
tomcat
Tomcat is an open source Java application server. It is a Servlet container that can be used to process Java Servlet and JavaServer Pages (JSP) requests. Its positioning is equivalent to the extension of the Apache server and can be used to provide complete JavaEE (Java Enterprise Edition) support. The main function of Tomcat is to connect to the HTTP protocol, and it can also act as a Web server. Generally speaking, Tomcat is a web application server, which is a Java web application server formed by integrating dynamic web page technologies such as Java Servlet and JSP. It is written in Java language, has the characteristics of light weight, high performance, easy deployment, etc., can run cross-platform, and is widely used in Web development and cloud computing platforms.
nginx
Nginx is a high-performance, reliable web server and reverse proxy server. It originated in Russia and is widely used in many high-traffic websites such as GitHub, Netflix, and WordPress. Nginx is popular because it adopts an event-driven asynchronous architecture, and processes requests through multiple processes and threads, enabling it to handle a large number of concurrent connections. It also has the advantages of fast response, high reliability, and low memory usage. . In addition to being a web server, Nginx can also be used as a load balancer, reverse proxy, cache, HTTP streaming server, etc. Compared with other web servers, Nginx also has a unique functional modular architecture that allows users to extend its functionality by adding modules.
vue project packaging
Adan’s Tips:
Different vue frameworks have different packaging and deployment instructions. The packaging and deployment instructions used when using init webpack before are not easy to use on the fancy pants framework pulled by git. So be sure to figure out what kind of framework you have before packaging. Here I will provide you with three commonly used frameworks for your judgment.
-
Vue-CLI: Vue-CLI is an official command line tool that can quickly create Vue projects and provides a variety of packaging options, such as packaging projects into UMD, CommonJS or ESM modules.
-
Nuxt.js: Nuxt.js is a general-purpose application framework based on Vue.js. It provides optimization functions such as automatic code splitting and server-side rendering. It can support packaging into static web pages, server-side applications, and single-page applications. type of application.
-
Quasar Framework: Quasar Framework is a comprehensive framework for building responsive mobile and web applications, which can help you build different types of applications, such as SPA, PWA and Electron applications. Quasar also has built-in Webpack and the corresponding packaging method, which makes it easy to build and deploy applications.
The above are some common Vue project packaging methods and their corresponding frameworks. Different packaging methods are suitable for different application scenarios and needs. Choosing a packaging method that suits your project can effectively improve the performance and stability of the project.
Packaging method of Vue-CLI: Use the following command to package the Vue project into UMD mode: npm run build — –formats umd
Use the following command to package the Vue project into CommonJS mode: npm run build — –formats cjs
Use the following command to package the Vue project into ESM mode: npm run build — –formats esm
How to package Nuxt.js: Use the following command to package the Nuxt.js project into a static web page: npm run generate
Package the Nuxt.js project as an application for server-side deployment with the following command: npm run build
How to package Quasar Framework: Use the following command to package a Quasar Framework project into a SPA application: quasar build
Package the Quasar Framework project into a PWA application using the following command: quasar build -m pwa
Package the Quasar Framework project into an Electron application with the following command: quasar build -m electron
tomcat deploys vue project
Because my project uses the first one above, I use npm run build
After packaging, the dist folder will appear. All we need to do is to put all the things under this folder under the root directory of the tomcat website. 
Adam interpreted:
When using vue to package and use tomcat for deployment, pay attention to write the agent under index.js under the config folder of the vue project, and must solve the cross-domain problem and the separation of the front and back. Therefore, the information transmitted by the foreground must be passed to the background. I will provide you with a sample code of a proxy.
'/api': {
target: 'http://xxx.xxx.xxx.xxx:10001',//Address that requires proxy
changeOrigin: true,
pathRewrite: {
'^/api':"/"
}
This code solves the cross-domain problem, and at the same time matches the front-end request to the corresponding server when using axios to make the request. And hide our background server port. Let our background security be guaranteed.
This is to use tomcat to package and deploy. If nignx is used, then additional consideration is required.
We now have the dist package we need.
Deploy the packaged vue project to tomcat
First find the application root directory of tomcat
Because I am using Alibaba Cloud’s server, I can directly find the one provided by the official website according to my instructions.
If we install it ourselves, Adan will attach a document link to install tomcat and nignx by ourselves later. Comment below if you need it. Adan will update the document as soon as possible.
You can see the file structure.
Go to the corresponding folder.
Upload the file to the specified folder. You can create a new folder under the webapps folder and name it the name of your project.
Upload vue file and name it
I passed the file into the ad folder by using the remote connection tool. Restart tomcat to test it.
Access port number + 8080
Found that the tomcat page is normal
But accessing the page found an error 404
Also the page is blank.
Try changing ‘/’ in index.js under config to ‘./’
assetsPublicPath: './',
Repackage and upload!
It still prompts 404 because the correct static resource was not found.
found it! These configurations were written under dev before, and these configurations should be written under bulid!
It is found that the resource can be accessed normally! !
But found a new problem! That is, the port number and background of the background cannot be accessed. For the background, 404 is reported because the API written before is the test environment/development environment, not the API of the deployed environment.
I will update this article tomorrow. There are two methods.
This is the first method!
Today, I will replace all the paths in axios in vue with real paths in the background without using api
The second method will be updated in the next issue!