How to deploy Vue project under nginx

Today I will use the server nginx, and I also need to deploy my vue project to the server, so I will write it down.

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

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

The downloaded file will be an unzipped package, unzip it to the folder you want to put it in

Run nginx.exe, then open the browser and enter localhost. If the following picture is displayed, it means success:

If it doesn't work, don't panic, it may be that 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 with an editor, and find the server's listen, which is your port number. The default is port 80. You can rewrite it according to your own unoccupied port. After rewriting, save it and open your localhost: the port number you rewrote 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 the method to install and configure the nginx server. The following are the steps on how to deploy your own vue project to the nginx server you installed and configured:

First find your own vue project and enter the command npm run build. It will generate a dist folder in your vue directory, which contains your vue project.

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

Copy them and open the html file in your nginx directory. There will be two default files. Delete them directly and paste the files you just copied into them.

Then open the browser and enter the port number you changed at the beginning: localhost: the port number you changed, press Enter; you will see your Vue project running. Mine is like this:

That's it. ~ ~~~~

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.