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

Source: Internet
Author: User
Tags nginx reverse proxy

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.