How to deploy vue project under nginx

This article mainly explains "how to deploy vue project under nginx". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to deploy vue projects under nginx.

First of all, go to the nginx website to download nginx:

Download address:

Download it will be an unzipped package, unzipped to the folder you want to put

Run nginx.exe, and then open a browser and enter localhost. The following picture shows that it is successful:

Then, if it doesn't work out, don't panic. Don't be afraid. Maybe your port is occupied by other content. Then you can open your nginx directory and find conf.

Click in and find a nginx.conf file

Then open it in the way of an editor. After opening it, the listen of sever here is your port number. The default is port 80. You can rewrite it according to your unoccupied port, save it after rewriting, and then open your localhost: the port number you rewrite is ok.

Server {listen 8088; server_name localhost; # charset koi8-r; # access_log logs/host.access.log main; location / {root html; index index.html index.htm;}

The above is how to install and configure the nginx server, and here are the steps to deploy your vue project to the nginx server you installed and configured:

First find your own vue project, and then type the command npm run build, and he will generate a dist folder in your vue directory that contains your vue project.

Then open the dist folder and copy the contents down. There will be two files inside, one is index.html, the home directory, and the other is the static folder.

Copy them down and open the html file in your nginx directory. There will be two default files directly deleted. Do not leave them, and then paste in the file you just copied.

Then open the browser and enter the port number localhost that you changed at the beginning: enter the port number you changed, and you will see that your vue project is running and my opening is like this:

At this point, I believe you have a deeper understanding of "how to deploy the vue project under nginx". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!