因为项目前后端分离部署，多个项目前端使用同一个nginx发布，每个项目对应不同的二级域名
dsp项目 : http://dsp.xxxx.com
bi项目：http://bi.xxxx.com
\1. 在vue.config.js文件下找到publicPath配置，添加如下配置（vuecli2就是config文件夹下的assetsPublicPath配置）
publicPath: process.env.NODE_ENV === "production" ? "/bi/" : "/bi/",
2.修改项目router的base
export default new Router({
mode: 'history', // 去掉url中的#
base: '/bi/',
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
3.修改.env.production
##这个地方改成每个项目不一样就行了
VUE_APP_BASE_API = '/prod'
4.然后将项目打包
将打包好的文件放到指定目录下
5.配置nginx
首先修改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目录拷贝进去即可
