Vue cli is packaged and deployed to nginx server

  Reprinted from: https://www.cnblogs.com/mmzuo-798/p/9273754.html

Recently, the company used vue for cloud platform products   Most of the previous development was relatively smooth, but there were bug s in the later packaging and deployment

Now record which pits you encounter

1. I directly npm run build   Package it and open index.html under dist directory   A blank page appears on the page  

no "NODE ENV" means that I did not specify which environment to package to

The correct package is npm run build:prod   

2. About Vue router   Because of the setting of mode:'history' in, the route cannot jump after my page is packaged

  And the bug is syntax error, unexpected token<  

  But I removed the history and repackaged it

3. About Nginx configuration nginx.conf

  Here, first review the nginx command and install nginx. Click here to view it

  start nginx Start service

  tasklist /fi "imagename eqnginx.exe" Check to see if it starts

  nginx -s reload  When changing the configuration file, restart it nginx Working process

  Close process

  nginx -s stop Shut down service

  nginx -s quit Safe shutdown

  taskkill /F/IM nginx.exe Close all nginx service

Next, sort out the correct packaging and deployment methods to nginx

  Novice Xiaobai suggests in mode:hash   Next run first

  Step 1: package (mode:hash)

1. The first problem after packaging is to open index.html in dist, which does not display a page, but a blank page.

1, Open index.js in the config folder

As shown in the figure, change the assetspublic path to '. /'

Then package again and find that the content of the route is illegally rendered without any errors,

2, Comment out the model in the route

3, Open index.html in dist again and you can see the page. If the route is correct, it means that you can get the dis directory to nginx for deployment

  Step 1: package (mode:history)

1, Packaging is a direct write / root path, not a relative path

2, The route path should be preceded by /, and history simulates the jump address path

3, nginx and the following configuration are all the same as hash

 

Step 2: how to deploy nginx

  1. Copy the dis directory to the html folder under nginx

2. Open the nginx.conf configuration 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       8082;  #Customize the port number of your server
        server_name  localhost; #Customize your IP or domain name. localhost: 127.0.0.1 local IP

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        
        root   E:\work\aiotcloud\yihao01-web-management\dist;  #dist directory points to your local working directory, which is very important
        index  index.html index.htm;  #The default file to open is index.html

     #The official website introduces that setting this route can solve the problem of history routing location
/ { try_files $uri $uri/ /index.html; }

     #####################################
     # The following addresses are nginx Proxy the address of the background server and then forward it to the front end to solve the cross domain problem
     #######################################
# Module 1 location
/securityAuthentication/{ proxy_pass http://192.168.0.16:6804; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; } # Module 2 location /admin/{ proxy_pass http://192.168.0.16:6810; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; } # Module 3 location /permission/{ proxy_pass http://192.168.0.16:6810; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; } # Module 4 location /configurationManagement/{ proxy_pass http://192.168.0.16:6812; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; } # Module 5 location /device/{ proxy_pass http://192.168.0.16:6806; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; } #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; # } #} }

3. Open the command window with Win + R and click cd   Go to nginx folder, start   Nginx start service

4. Enter localhost:8082 in the browser   You can see the page of nginx service startup!

 

Tags: Nginx Vue

Posted on Wed, 10 Nov 2021 06:32:16 -0500 by theverychap