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