vue项目nginx二级域名配置方式
作者：陈小成
这篇文章主要介绍了vue项目nginx二级域名配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue项目nginx二级域名配置
1、将vue项目路由的加入base配置如下图所示，打包备用
2、配置nginx，下图所示
3、在步骤2中的nginx的根目录下面html文件夹下面新增data文件夹，在data下面新建vue和test文件夹，将步骤1打包的文件放到vue文件夹和test文件夹，访问本地http://localhost/test/和http://localhost/vue/
nginx多个vue项目使用独立二级域名部署
因为项目前后端分离部署，多个项目前端使用同一个nginx发布，每个项目对应不同的二级域名
- dsp项目 : dsp.xxxx.com
- bi项目：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目录拷贝进去即可
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。