Vue-cli3.0打包部署到Nginx

　　Vue-cli3.0相比於Vue-cli2.0，僅從根目錄來看，最大的區別就是Vue-cli3.0少了build和config文件夾，前者用於項目構建(webpack)相關代碼，後者用於項目開發環境配置。取而代之的是vue.config.js這個文件，看起來目錄簡潔不少。

 

 

 圖1 vue-cli3.0根目錄

打開vue.config.js文件，大致的配置如下：

module.exports = {
  // 基本路徑
  publicPath:"./",
  // 輸出文件目錄
  outputDir: 'dist',
  lintOnSave: true,
  devServer: {
    proxy: {
      '/OAuth': { 
        target: 'http://192.168.137.1:21000/oauth2-online-sv/',//OAuth認證服務
        changeOrigin: true,
        secure:false,
        pathRewrite: {
            '^/OAuth': ''//通配符
        }
      },
      '/PF': { 
        target: 'http://192.168.137.1:21000/oauth2-mgm-sv/',//授權中心後臺服務
        changeOrigin: true,
        secure:false,
        pathRewrite: {
          '^/PF': ''//通配符
        }
      },
      '/PC': { 
        target: 'http://192.168.137.1:21000/scpc-mgm-sv/',//產品中心後臺服務
        changeOrigin: true,
        secure:false,
        pathRewrite: {
          '^/PC': ''//通配符
        }
      }
    }
  },
}

　　這裏我配置了三個後臺服務（OAuth、PC、PF）的代理轉發路徑，打包的時候需要注意，vue-cli3.0（vue-cli3.3+以上）已經用publicPath取代了baseUrl，如果繼續使用baseUrl，會報警告，如圖2所示，打好的包也不能用，靜態文件全部失效，如圖3所示。

 

 

 圖2 如果使用baseUrl打包文件，控制檯會報警告，讓你用publicPath替代baseUrl

　　圖3 使用baseUrl打包文件，加載的頁面靜態文件全部失效

　　這是因爲webpack會在靜態文件路徑前面添加publicPath的值，即項目中的靜態資源，它們的路徑對應的是項目根目錄下的位置，但是我們打包的文件裏找不到這個路徑，所以加載不了對應的靜態資源。所以我們需要設置publicPath，將其引到打包生成文件dist下的相對路徑，打包之後加載不了靜態資源很多情況下都是因爲publicPath沒設置好。

 　　vue.config.js設置好之後，npm run build，打包成功大致如圖4所示。

 

 

圖4 打包成功 　　

　　然後這個時候項目根目錄下就會生成一個dist文件，可以先點開這個dist文件下的index.html文件，看它在瀏覽器上是否能正常顯示。如果能，則包是正確的；反之，如果靜態資源（特別是圖片）沒有加載出來，如圖3所示，控制檯裏祖國山河一片紅，就要回去好好找找原因了。

　　然後我們打開已經下載好解壓的Nginx文件夾，將dist拷貝進去，我是放在html文件夾下，打開conf>nginx.conf，修改默認的配置文件。

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       81;  #nginx監聽端口
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   C:/Users/zbc/Desktop/nginx-PC/nginx-1.16.1/html/dist;    #打包文件dist所在的絕對路徑
            index  index.html index.htm;
            autoindex on;       #開啓nginx目錄瀏覽功能
            autoindex_exact_size off;   #文件大小從KB開始顯示
            charset utf-8;          #顯示中文
            add_header 'Access-Control-Allow-Origin' '*'; #允許來自所有的訪問地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持請求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        }

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

        #開始配置我們的反向代理
        location /OAuth{
           include uwsgi_params;
           proxy_set_header   Host             $host;
           proxy_set_header   x-forwarded-for  $remote_addr;
           proxy_set_header   X-Real-IP        $remote_addr;
           proxy_pass  http://127.0.0.1:21000/oauth2-online-sv;
        }
        #反向代理2
        location /PC{
           include uwsgi_params;
           proxy_set_header   Host             $host;
           proxy_set_header   x-forwarded-for  $remote_addr;
           proxy_set_header   X-Real-IP        $remote_addr;
           proxy_pass  http://127.0.0.1:21000/scpc-mgm-sv;
        }

        #反向代理3
        location /PF{
           include uwsgi_params;
           proxy_set_header   Host             $host;
           proxy_set_header   x-forwarded-for  $remote_addr;
           proxy_set_header   X-Real-IP        $remote_addr;
           proxy_pass  http://127.0.0.1:21000/oauth2-mgm-sv;
        }
        # 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;
    #    }
    #}

}

　　需要注意的是listen配置的是Nginx監聽端口，root放的是打包文件dist的所在路徑，還有就是配置代理轉發的proxy_pass，可與上文vue.config.js裏的轉發配置比較也很清楚，就不詳述了，其他的設置（瀏覽器協商緩存等）也就不在此處展開了。

　　然後，啓動Nginx，雙擊nginx.exe，命令行一閃而過，打開瀏覽器，輸入http://localhost:81，即可看到你佈置在Nginx上的頁面了。

常用Nginx命令行（cd進入Nginx所在路徑後使用）：

　　start nginx //啓動nginx
　　nginx -s reload //重載配置
　　nginx -s stop //快速停止
　　nginx -s quit //完整有序停止