Vue前端项目打包部署在Linux上

一、vue前端打包成dist

1、使用webstorm一键打包 

2、打包有可能失败的原因:添加了模拟数据

xz-unity-operation-res\src\main.js

if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

3、所放的文件目录这里去掉了dist文件夹直接放到工程名下

二、Linux服务器上安装nginx并且进行相关配置

1、安装nginx忽略

2、在配置中添加本地跳转:

/usr/local/nginx/conf/nginx.conf
  •  有的nginx只有上述一个配置文件,有的会写多个conf文件然后include如:
  • 
    user  root;
    worker_processes  1;
    
    error_log  /var/log/nginx/error.log warn;
    pid        /var/run/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    
    
    http {
        include       /etc/nginx/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  /var/log/nginx/access.log  main;
    
        sendfile        on;
        #tcp_nopush     on;
    
        keepalive_timeout  65;
    
        #gzip  on;
    
        include /etc/nginx/conf.d/*.conf;
    }
    

     

    server {
        listen       80;
        server_name  localhost;
    
        #charset koi8-r;
        #access_log  /var/log/nginx/host.access.log  main;
    
        location / {
            root   /usr/share/nginx/html;
            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   /usr/share/nginx/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;
        #}
    }
    
    server {
        listen 8020;
        server_name localhost;
    
        charset utf-8;
    
        location / {
            root /data/java/xz-unity-operation-res/;
            #try_files $uri $uri/ /index.html;
        }
    }
    
    

    这只介绍一个总配置文件的:

  • 因为有多个代理所以避免串号(这是个坑有时候会访问不了)另起一个端口配置如这的8010和80端口:

  • location / {
    			root /home/java/test/14-xz-unity-operation-res;
    			index  index.html index.htm;
    		}

    下方是总配置情况

  • 
    #user  nobody;
    user root;
    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;
    
        proxy_temp_path /usr/local/nginx/cache/img_temp 1 2;
        proxy_cache_path /usr/local/nginx/cache/img levels=1:2 keys_zone=cache_one:20m inactive=1d max_size=1g;
    
        #gzip  on;
    	
        gzip on;
        gzip_min_length 1k;
        gzip_buffers 4 16k;
        gzip_comp_level 2;
        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_proxied any;
        gzip_vary on;
    
        server {
            listen       80;
            server_name  localhost;
    
    		proxy_set_header Host $host;
    		proxy_set_header X-Real-IP $remote_addr;
    		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
    		location /xz-sms {
    			proxy_pass http://10.10.22.145:8011/xz-sms;
    		}
    
    		location /knowledge-contest {
    			proxy_pass http://10.10.22.145:8010/knowledge-contest;
    		}
    
    		location /xz-app {
    			root /home/java/test/01-xz-app-middle-server-8001;
    		}
    
    		location /knowledge-contest-resources {
    			root /home/java/prod/04-xz-ajiaedu-knowledge-contest-8010/files;
    		}
    		location /xz-unity-operation-res {
    			alias /home/java/test/14-xz-unity-operation-res;
    			index  index.html index.htm;
    		}
    
    		location /zhengding-res {
    			root /home/zhengding;
    		}
    		   
    			location /wx-auth-res {
    			root /home;
    		}
    
            location /demo {
                proxy_pass http://10.10.22.145:8081/demo;
            }
    	
    		location /app-middle-resources {
    			autoindex on;  
    				autoindex_exact_size off;  
    				autoindex_localtime on; 
    			root /home/java;
    		}
    
        }
    	
    	server {
            listen       8010;
            server_name  localhost;
    
    		proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
    		location / {
    			root /home/java/test/14-xz-unity-operation-res;
    			index  index.html index.htm;
    		}
    		
    		location /api {
    			rewrite ^/api/(.*) /$1 break; 
    			proxy_pass http://10.10.22.145:8190/doc.html;
    		}
        }
    
    
        # 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.html;
        #    }
        #}
    
    
        # 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;
        #    }
        #}
    
    }
    

    其中vue会用到api接口工程所以记得写代理,rewrite记得写:

  • location /api {
    			rewrite ^/api/(.*) /$1 break; 
    			proxy_pass http://10.10.22.145:8190/doc.html;
    		}

    3、第一次得重启nginx

4、参考文章:https://www.jianshu.com/p/4f430d08b96a

相关推荐
©️2020 CSDN 皮肤主题: 数字50 设计师:CSDN官方博客 返回首页