linux系统 nginx服务 多个vue项目配置-超详细

  • linux系统 nginx服务 多个vue项目配置-超详
  • 首先了解nginx路由配置注意事项
  • nginx安装
  • vue项目配置后缀
  • nginx安装配置
  • 重启nginx服务
  • 配置好后出现问题排除


linux系统 nginx服务 多个vue项目配置-超详

首先了解nginx路由配置注意事项

两种情况
主要分为两种情况，以及一些注意事项：

  • proxy_pass的链接无/
  • proxy_pass的链接有/

第一种：proxy_pass的链接无/
proxy_pass中，不带『/』，则把『匹配字符串及后缀（/api/xxx）』均带给转发地址

# 效果为：http://xxx.xxx.com/api/xxx -> http://127.0.0.1:7000/api/xxx. 转发的时候,包含了url前缀.
location ^~ /api/ { 
    proxy_pass  http://127.0.0.1:7000; 
}

# 效果与上面一致
location ^~ /api {
    proxy_pass  http://127.0.0.1:7000; 
}

第二种：proxy_pass的链接有/
proxy_pass中，带『/』，则把『请求地址排除匹配字符串（/api/）』后，再带给转发地址

# 效果为：http://xxx.xxx.com/api/xxx --> http://127.0.0.1:7000/xxx
location ^~ /api/ {
    proxy_pass  http://127.0.0.1:7000/; # 端口后多了斜杠『/』
}

# 注意：下面的代码会导致失败，原因为『/api/xxx排除了/api』后，会把『/xxx』带给转发地址，但转发地址中已有了斜杠，结果会多了一条斜杠，报错。
# 效果为：http://xxx.xxx.com/api/xxx --> http://127.0.0.1:7000//xxx
location ^~ /api {  # 这里的匹配字符串最后少了斜杠『/』
    proxy_pass  http://127.0.0.1:7000/;
}

注意事项
location的修饰符为正则匹配时，proxy_pass的地址最后不要带斜杠

nginx安装

网子自己找博客安装，yum安装，我的博客也有写到

vue项目配置后缀

我这里统一加的是 tem 后缀

1：在你项目的 vue.config.js 文件修改 publickPath参数
这个参数表示
部署应用包时的基本 URL

publicPath: '/tem',

nginx proxy 多个地址 nginx配置多个proxy_pass_vue.js

配置数据位置，茹上图：这里我是引入的配置，不用管

2：修改路由配置项 router文件下的index.js

// 导出路由 在 main.js 里使用
const router = new VueRouter({
    routes,
    mode: ‘history’,
    base: ‘/tem’
});

1：项目文件修改完毕，修改后，本地启动项目，会发现页面已经带有tem后缀

2：打包成功的index.html文件 会发现 访问的js css 路径 前面也带有了tem路径访问

茹下图

nginx proxy 多个地址 nginx配置多个proxy_pass_linux_02


至此：项目配置成功

nginx安装配置

我的nginx放了两个vue项目，一个带有不带后缀访问的，一个带有后缀访问的
分别存放的目录是
不带后缀： /usr/local/nginx/html/web
带有后缀： /usr/local/nginx/html/tem

nginx配置文档修改

location / {
        root   /usr/local/nginx/html/web;
        try_files $uri $uri/ /index.html;
		index  index.html index.htm;
    }
        location /tem {
            alias  /usr/local/nginx/html/tem/;
	        try_files $uri $uri/ /tem/index.html;
			index  index.html index.htm;
        }
		location /api{
			rewrite  ^.+api/?(.*)$ /$1 break;
			include  uwsgi_params;
			proxy_pass  http://192.168.0.1:8080;
		}

文档说明

三个location 配置

1：第一个location

不带后缀的vue路由配置 也就是我们常用nginx一个vue项目的配置，不用修改

location / {
            root   /usr/local/nginx/html/web;
	        try_files $uri $uri/ /index.html;
			index  index.html index.htm;
        }`

注意细节：
1：文件地址，用root表示，地址后面不带斜杠 /

root   /usr/local/nginx/html/web;

2：try_files这个配置是vue页面刷新不404 直接 /index.html 就行

try_files $uri $uri/ /index.html;

3：index 固定不变

index  index.html index.htm;

2：第二个location
这个是带有tem后缀的vue项目地址的配置

location /tem {
            alias  /usr/local/nginx/html/tem/;
	        try_files $uri $uri/ /tem/index.html;
			index  index.html index.htm;
        }

1：注意 地址用alias表示 并且地址后面需要带有斜杠 /

alias  /usr/local/nginx/html/tem/;

2：try_files参数 后面index页面前要把tem后缀加上去

try_files $uri $uri/ /tem/index.html;

3：第三个location
不做多讲解，这个是后端请求拦截转发

location /api{
			rewrite  ^.+api/?(.*)$ /$1 break;
			include  uwsgi_params;
			proxy_pass  http://192.168.0.1:8080;
		}

重启nginx服务

最后重启nginx服务器就行

我的nginx服务启动，你们的可能有点不同
我的 重启
/usr/local/nginx/sbin/nginx -s reload

配置好后出现问题排除

前提：如果全部配置好，把项目放入了指定的位置后

1：页面访问出现404

这个时候应该是你的nginx配置出现了问题，自己需要排除nginx配置

2：页面没有出现404， 但是页面出现空白
这个时候你要考虑你的vue项目配置是否有问题，打包有没有问题

结束----------------------------------------------------------------------------------