vue項目nginx二級域名配置方式

更新時間：2023年06月30日 10:24:35 作者：陳小成

這篇文章主要介紹了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發(fā)布，每個項目對應不同的二級域名

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;
? ? ? ? }
? ? }?? ?

然后執(zhí)行nginx -s reload 重新加載nginx配置即可

備注：因為vue打包將index.html中css，圖片的路徑都加了publicPath這個參數(shù)值，在訪問頁面會出現(xiàn)找不到資源的情況，這種情況下，只需要在你的項目目錄下創(chuàng)建這個路徑，然后將static目錄拷貝進去即可