欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

nginx部署多个vue项目如何配置

程序员文章站 2022-07-02 10:00:43
...

使用同一域名或者ip去部署访问多个前端项目,比如域名/ip直接访问官网,域名/ip后面带路径去访问其它项目

一、 最终效果

官网访问地址: http://192.168.27.119/login
项目二访问地址:http://192.168.27.119/biz/login
项目三访问地址:http://192.168.27.119/admin/login

二、 vue项目中的配置修改

注:http://192.168.27.119/login 这个项目无需配置路径,直接打包即可。下面以项目二,通过/biz/访问作为例子

  1. 打开config下的index.js文件
    将build下面的assetsPublicPath改为路径名

nginx部署多个vue项目如何配置
2. 打开 src/router/index.js 文件
添加 base: '/biz/'
nginx部署多个vue项目如何配置
3. 打开项目index.html文件,将引入的js文件路径前加上/biz/
nginx部署多个vue项目如何配置

三、nginx配置文件修改

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    error_log   /home/devtools/nginx/error.log;
    access_log  /home/devtools/nginx/access.log  main;
    location / {
        root /home/datasmith/website/html;
	    try_files $uri $uri/ /index.html;
	    index  index.html index.htm;
    }

  location ^~/admin{
		alias /home/datasmith/aicall/gld/html;
        try_files $uri $uri/ /admin/index.html;
    }

  location ^~/biz{
        alias /home/datasmith/aicall/khd/html;
        try_files $uri $uri/ /biz/index.html;
    }

}

nginx部署多个vue项目如何配置

四、重启nginx

1.查看修改的配置文件是否有误
进入/usr/sbin/目录,运行./nginx -t
nginx部署多个vue项目如何配置

2.确认修改无误后,重启nginx

在/usr/sbin/目录下,运行./nginx -c /etc/nginx/nginx.conf