部署VUE參考手冊

申請HTTPS

阿里雲 -> 產品與服務 -> SSL證書 -> 購買證書 -> 驗證 -> 下載文件

單個域名注意：幾個域名（包含二級域名）就申請幾個證書

申請二級域名

阿里雲 -> 產品與服務 -> 雲解析DNS -> 域名解析 -> 解析設置 host.xxxx.com

• 主機記錄：對應二級域名
• 記錄值：對應服務器IP地址

配置Nginx並部署router = history

第一種方式：二級域名或者頂級域名部署
複製代碼

• 第一步：上傳剛纔下載的HTTPS證書而且上傳到自定義（隨你）目錄下 $dirname
• 第二步：

server {

        listen 443 ssl;
        # 注意 不要帶有 host.protocol 和 www (頂級域名 除外)
        server_name host.xxxx.com;
        ssl on;
        root html;
        index index.html index.htm;
        ssl_certificate      $dirnam;
        ssl_certificate_key  $dirnam;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        # 部署項目到根目錄
        location / {
            root   $project-path;
            try_files $uri $uri/ /index.html;
        }
    }
server {
    listen       80;
    server_name  host.xxxx.com;
    # http -> https
    return      301 https://host.xxxx.com/$request_uri;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
複製代碼

第二種方式：一個域名 根據路徑部署
複製代碼

# 必須是同一個文件
# 假設項目名稱來區分 去訪問哪一個項目 eg. projectName = $name 
server {
    listen       80;
    server_name  $IP https://host.xxxx.com host.xxxx.com;
    # router mode hash
    location / {
        root   /root/my_blog;
        index  index.html index.htm;
    }
    # router mode history
    location /$name  {
        alias  項目絕對路徑;
        index  index.html index.htm;
        try_files $uri $uri/ /$name/index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
複製代碼

# vue 配置
vue.config.js: publicPath: process.env.NODE_ENV === "production" ? `${package.name}` : "/",
vue router.js: base: process.env.VUE_APP_BASE_URL #設置.env.x文件就能夠了
複製代碼