Nginx deployment method for accessing the project created by vue-cli, nginxvue-cli

Nginx deployment method for accessing the project created by vue-cli, nginxvue-cli

From the official vue-router website, we learned that backend configuration is required for packaging a vue project built in history mode, while hash is not required, however, the address has an additional #/suffix. After a project built in the hash mode is packaged, I only need to use software such as webstorm to open the access.

However, the background technology is required for projects built in the history mode. Here I use nginx reverse proxy to deploy the project. The procedure is as follows:

1. Create backend server objects

Upstream mixVueServer {server baidu.com; # Here is your server domain name}

2. Create access port and reverse proxy rules

Server {listen 8082; server_name localhost; location/{root E:/mix_vue/dist; # locate the project directory # index index.html index.htm; try_files $ uri // index.html; # configure} location ~ according to the rule on the official website ~ \. Php $ {proxy_pass http: // mixVueServer; # reverse proxy Based on backend languages to handle cross-origin problems proxy_set_header Host $ host; proxy_set_header X-Real-IP $ remote_addr ;} error_page 500 502 503 x.html; location =/50x.html {root html ;}}

Finally, enter the port access in the address bar:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.