由于项目先后端分离部署,多个项目前端使用同一个nginx发布,每一个项目对应不一样的二级域名javascript
dsp项目 : dsp.xxxx.comcss
bi项目:bi.xxxx.comhtml
1. 在vue.config.js文件下找到publicPath配置,添加以下配置(vuecli2就是config文件夹下的assetsPublicPath配置)前端
publicPath: process.env.NODE_ENV === "production" ? "/bi/" : "/bi/",
2.修改项目router的basevue
export default new Router({ mode: 'history', // 去掉url中的# base: '/bi/', scrollBehavior: () => ({ y: 0 }), routes: constantRoutes })
3.修改.env.productionjava
##这个地方改为每一个项目不同就好了 VUE_APP_BASE_API = '/prod'
4.而后将项目打包node
将打包好的文件放到指定目录下nginx
5.配置nginxweb
首先修改nginx.conf后端
# For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/ user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections 1024; } http { 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 /var/log/nginx/access.log main; sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; include /etc/nginx/mime.types; default_type application/octet-stream; # Load modular configuration files from the /etc/nginx/conf.d directory. # See http://nginx.org/en/docs/ngx_core_module.html#include # for more information. include /etc/nginx/conf.d/*.conf; #这个地方是我本身建了一个目录,两个项目分别在这个目录下建本身的配置文件 include /etc/nginx/custom/*.conf; server { listen 80 default_server; listen [::]:80 default_server; server_name dsp.xxxx.com; root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } # Settings for a TLS enabled server. # # server { # listen 443 ssl http2 default_server; # listen [::]:443 ssl http2 default_server; # server_name _; # root /usr/share/nginx/html; # # ssl_certificate "/etc/pki/nginx/server.crt"; # ssl_certificate_key "/etc/pki/nginx/private/server.key"; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 10m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # # # Load configuration files for the default server block. # include /etc/nginx/default.d/*.conf; # # location / { # } # # error_page 404 /404.html; # location = /40x.html { # } # # error_page 500 502 503 504 /50x.html; # location = /50x.html { # } # } }
dsp.conf
server { listen 80; server_name dsp.xxxx.com; location / { try_files $uri $uri/ /index.html; #dsp项目目录 root /soft/dpf/web; index index.html index.htm; } #prod-api是代理的路径 location /prod-api/{ proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; ##后端服务的地址 proxy_pass http://localhost:20001/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
bi.conf
server { listen 80; server_name bi.xxxx.com; root /soft/bi/ui; location /bi/ { try_files $uri $uri/ /index.html; } location /prod/{ proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://localhost:30001/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
而后执行nginx -s reload 从新加载nginx配置便可
备注:由于vue打包将index.html中css,图片的路径都加了publicPath这个参数值,在访问页面会出现找不到资源的状况,这种状况下,只须要在你的项目目录下建立这个路径,而后将static目录拷贝进去便可