VUE多项目部署

VUE多项目部署

公司新上了个VUE的项目， 因为与另外的某个项目比较相似，所以准备记录在同一个域名下。
在此过程中，修改了N次配置，才让服务正常运行，遂写此文，以备查阅

1. 环境

系统: CentOS 7.6.1810
nginx: 1.18.0
nodejs: v10.16.3
NPM: v10.16.3
VUE： 2.6.11
vue-cli: 4.0.0

2. 部署VUE

项目文件都放在/opt/nginx_root/目录下

# 1. 安装nodejs
cd /usr/local/
wget https://npm.taobao.org/mirrors/node/10.16.3/node-v10.16.3-linux-x64.tar.xz
tar xvf node-v10.16.3-linux-x64.tar.xz 
echo 'export PATH=$PATH:/usr/local/node-v10.16.3-linux-x64/bin'  >> ~/.bashrc
source ~/.bashrc
npm install -g cnpm --registry=https://registry.npm.taobao.org


# 2. 拉取项目代码 
cd /opt/nginx_root/
git clone http://git..../entrance-unit-vue.git
git clone http://git..../face-acs-vue.git

# 3. vue安装环境
cd entrance-unit-vue
cnpm install 
cnpm run build  

cd ../face-acs-vue
cnpm install 
cnpm run build 

3. Nginx安装

# 安装必要软件
yum install yum-utils

# 添加一下内容到 /etc/yum.repos.d/nginx.repo
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true


# 安装nginx
yum install nginx

4. 配置

配置包括nginx 和vue的配置

4.1 nginx 配置示例如下：

# vim /etc/nginx/conf.d/default.conf
server {
    listen       80;
    server_name  localhost;
    root   /opt/nginx_root/entrance-unit-vue/dist;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;
    access_log /var/log/openresty/louyu.access.log;
    error_log  /var/log/openresty/louyu.error.log;

    location / {
        root   /opt/nginx_root/entrance-unit-vue/dist;
        try_files $uri $uri/ /index.html;
        index index.html index.htm;
   }

   location /face-web {
        # face-acs-web
        alias   /opt/nginx_root/face-acs-vue/dist;
        try_files $uri $uri/ /face-web/index.html;
        index index.html index.htm;
   }
        
        
   location ~ /face/  {
        # face-acs-vue backend
        proxy_pass  http://127.0.0.1:8181;
        proxy_redirect     off;
        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_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
        proxy_max_temp_file_size 0;
        proxy_connect_timeout      90;
        proxy_send_timeout         90;
        proxy_read_timeout         90;
        proxy_buffer_size          4k;
        proxy_buffers              4 32k;
        proxy_busy_buffers_size    64k;
        proxy_temp_file_write_size 64k;
        client_max_body_size  100m;
   }
         
   location ~ /bfac/  {
        # entrance-unit-vue backend
        proxy_pass  http://127.0.0.1:8080;
        proxy_redirect     off;
        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_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
        proxy_max_temp_file_size 0;
        proxy_connect_timeout      90;
        proxy_send_timeout         90;
        proxy_read_timeout         90;
        proxy_buffer_size          4k;
        proxy_buffers              4 32k;
        proxy_busy_buffers_size    64k;
        proxy_temp_file_write_size 64k;
        client_max_body_size  100m;
   }
}

4.2 VUE配置

多项目在非默认（根 ''/''）链接下, 需要在vue.config.js 文件中添加一项配置publicPath,

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/face-web/' : '/face-web/',     
    configureWebpack: {
        ...
    }
}

5.访问测试

根路径访问

非根路径访问