The whole process of Vue project from packaging optimization to online deployment of cloud server (**teach you how to optimize and deploy your own project on cloud server**)

foreword

As front-end developers, we not only need to be able to write code, optimize packaging, and online deployment are also essential skills for front-end engineers. This article will teach you to start from scratch and package and publish a complete project to an online server. The first preparation is to need a cloud server.

Project packaging optimization

Packaging of the project

For project packaging, enter the command npm run build directly in the project directory, and
you can see that a file named dist is generated in the project directory, which is the packaged file, and you can deploy this file.

project optimization

We can use the vue project manager to see where our project can be optimized
. Enter vue ui in cmd to open the project manager and open the project we need to package.
Task - "build -" run

After the compilation and packaging are successful, the dist file will appear in the directory as in the above method.
Click Analysis, and you can view the project compilation-related information for optimization. For example, I have introduced all element-ui here, so the memory ratio is relatively high, and it can be changed to partial introduction to reduce the packaging size and improve the operating efficiency.

Project online deployment

There are two ways to package the project and get the dist folder. Next, we need to publish this folder to the server. For deployment, I choose to use nginx as the proxy.

First, install nginx on the server. For the installation and use of nginx, see my article (link below) for
detailed steps to install nginx on the server .

From here, I default everyone has installed nginx. Here I use two tools to connect to the server, xshell and Xftp, which are relatively simple to use and will not be described here.

Upload the project to the server

Use Xftp to connect to the server, and then drop our packaged dist file into the server folder

configure nginx

Next, we enter nginx.conf in nginx/conf in the server, which is its configuration file, configure it, edit the file, and
find the content of the server in http to write:

1. Fill in the listening port number after listen, remember to release the port
2. After server_name, fill in the public address of the server
3. In the location, fill in the location where your dist file is stored after root

server {
        listen       3434;
        server_name  1.xxx.56.xxx;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /root/Student_vue/dist;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

After the modification, save it, return to the nginx/sbin directory, enter the command ./nginx to run nginx
and then the browser access the address 1.xxx.56.xxx:3434 configured above

It is found that you can enter the login page, but when you click login, you will get an error
. Don't panic, enter the nginx.conf configuration file again, configure the proxy of the interface
and add a line of code to the routing loaction /, and add location /api/ below to configure the interface proxy

location / {
            root   /root/Student_vue/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
location /api/ {
     proxy_pass http://1.xxx.xx.64:5004/api2/;
}

Save the file, enter the nginx/sbin directory, enter the command ./nginx -s reload to restart the nginx service, access the address, completely ok

At last

All steps are feasible. If you encounter problems during the deployment process, you can leave a message below to discuss~