Shulou(Shulou.com)06/01 Report--

This article is about how to deploy vue projects under nginx. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

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

Download address: nginx.org/en/download.html

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

Run nginx.exe, and then open the browser and enter localhost as shown in the following picture to illustrate success:

Then if it doesn't come out successfully, don't panic. It may be that your port is occupied by other content. At this time, you can open your nginx directory and find conf.

Click inside and find a file called nginx.conf

Then open it with an editor. After opening it, find the sever listen here is your port number. The default is port 80. You can rewrite it according to your unoccupied port. After rewriting, save it and open your localhost: The port number you rewritten 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. Here are the steps to deploy your own vue project to the nginx server you installed and configured:

First find your own vue project and then enter the command npm run build he will generate a dist folder in your vue directory which is your vue project

Then open this dist folder and copy the contents of it, and there will be two files in it, one is index.html, which is the home directory, and the other is the static folder.

Copy them down and open the html file under your nginx directory. There will be two default files. Delete them directly. Don't keep them. Paste the files you just copied into them.

Then open the browser and enter the port number you changed at the beginning localhost: Enter the port number you changed; you will see your own vue project running up. My open is like this:

Thank you for reading! About "how to deploy vue project under nginx" this article is shared here, I hope the above content can be of some help to everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.