雲伺服器部署項目：vue-cli 部署服務配置

雲伺服器部署項目：vue-cli 部署服務配置

單頁面應用應該放到nginx或者apache、tomcat等web代理伺服器中，同時要根據自己伺服器的項目路徑更改vue的路由位址。

​ 如果說項目是直接跟在域名後面的，比如:​​http://www.sosout.com​​​ ，根路由就是 ‘/’。

如果說項目是直接跟在域名後面的一個子目錄中的，比如:​​​http://www.sosout.com/children​​ ，根路由就是 '/children '，不能直接通路index.html。

​ 以配置Nginx為例，配置過程大緻如下：

（假設：1、項目檔案目錄： /mnt/html/vueCli（vueCli目錄下的檔案就是執行了打包後生成的目标目錄下的檔案）；2、通路域名：vue.sosout.com）

進入nginx.conf新增如下配置：
server {
    listen 80;
    server_name vue.sosout.com;
    root /mnt/html/vueCli;
    index index.html;
    location ~ ^/favicon.ico$ {
        root /mnt/html/vueCli;
    }

    location / {
        try_files $uri $uri/ /index.html;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto  $scheme;
    }
    access_log  /mnt/logs/nginx/access.log  main;
}      

server {
    listen 80;
    server_name vue.sosout.com;
    root /mnt/html/vueCli;
    index index.html;
    location ~ ^/favicon.ico$ {
        root /mnt/html/vueCli;
    }
    
    location / {
        try_files $uri $uri/ @fallback;
        index index.html;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto  $scheme;
    }
    location @fallback {
        rewrite ^.*$ /index.html break;
    }
    access_log  /mnt/logs/nginx/access.log  main;
}