Front-end deployment of Vue project - nginx method

1. Prepare the server, download and install nginx and start it

Just find an article on the Internet, after downloading and installing, start nginx

2. Vue project compilation and packaging

Run npm run build in the root directory of the project to compile and package

After the packaging is completed, there will be an additional dist directory in the root directory of the project

3. Upload the dist directory to the server

4. Configure the nginx.config file in the nginx installation directory

Because nginx is used as a proxy, the proxy in vue.config.js will not take effect. We use nginx to configure the reverse proxy, and save the file after configuration

server {
    
    
        listen       3012; #访问端口
        server_name  localhost;
        location / {
    
    
       	   root /xx/xx/xx/dist; #前端dist包地址
           index  index.html index.htm;
	       try_files $uri $uri/ /index.html;
		}
        location /ele/ {
    
    
		proxy_set_header x-forwarded-for  $remote_addr;
		proxy_pass http://xx.xx.xx.xx:8080/; #后端代理地址
		}
	 

	charset utf-8;
    }

5. Restart nginx

Use service nginx restart or nginx -s reload to restart nginx

6. Access address

The address is the server address, and the port is the access port configured by nginx,
because I configured 3012, so just ip:3012. If there are other routes on the home page, you can use ip:3012/router, for example, the home page route is /index and the access address is ip:3012/index