vue deployment to server

vue deployment to server

  1. Development environment vue+element
  2. Computer system windows 10 professional edition
  3. In the process of development, we often use vue for development projects, but after the project is developed, we need to deploy it to the server. Next, let's talk about how to deploy it to the server. The methods are as follows:
  4. First, we need to package the front-end project vue project. I use npm run build, and other packaging methods can also be used! There is no extension here. After packaging, we will get a dist folder. We just need to copy this file.
  5. We also need to download nginx. After downloading, configure it as follows:
  • We will see the file here after unpacking
  • Double click to enter
  • double-click
  • Select to edit this file
  • The code is as follows:
#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8098;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   G:\dist;
            index  index.html index.htm;
        }

       location ^~ /api/admin/
    {
        proxy_pass http://192.168.1.98:8090;
    }

        #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;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}
  • You only need to modify the following parts:

//nginx configuration ends here!
6. Next, we need to check whether the server is configured with java environment. If not, configure the following. The configuration method is as follows:

  • First, install java as follows:
  • Find my computer in windows7 and right-click properties
  • Find this computer in windows10 and click Properties in the upper left corner. You will see the following interface:
  • Click to enter
  • Click to enter
  • Click to enter
  • Select path, click Edit, and then click new
  • Just paste the java installation path:
  • Paste the two paths under the corresponding two paths. Note: both paths have the right two paths!
  • cmd input java javac to see if such content is output:
  • If the output result is similar to this, it indicates that the java configuration is successful!
  • Next, you need to copy the background code, create a new file on Disk C, and then paste it!
  • Find the path of the file, then click the path and enter cmd
  • Enter jfinal. In the terminal Bat start is OK!
  • //Note: this jfinal Bat is the name of the file. You should change it according to the name of the file.
  • Open the browser and enter: localhost:8098 enter, you will see the effect!
  • When the vue project is deployed here, it will be over! Isn't it very simple! Isn't it great! Let's work together to reach the peak!

Tags: Vue.js

Posted by niesom on Tue, 24 May 2022 08:29:45 +0300