部署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文件就能够了
复制代码