两种情况
主要分为两种情况，以及一些注意事项：
第一种：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的地址最后不要带斜杠
网子自己找博客安装，yum安装，我的博客也有写到
我这里统一加的是 tem 后缀
1：在你项目的 vue.config.js 文件修改 publickPath参数
这个参数表示
部署应用包时的基本 URL
publicPath: '/tem',
配置数据位置，茹上图：这里我是引入的配置，不用管
2：修改路由配置项 router文件下的index.js
// 导出路由 在 main.js 里使用
const router = new VueRouter({
routes,
mode: ‘history’,
base: ‘/tem’
});
1：项目文件修改完毕，修改后，本地启动项目，会发现页面已经带有tem后缀
2：打包成功的index.html文件 会发现 访问的js css 路径 前面也带有了tem路径访问
茹下图
至此：项目配置成功
我的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服务启动，你们的可能有点不同
我的 重启
/usr/local/nginx/sbin/nginx -s reload
前提：如果全部配置好，把项目放入了指定的位置后
1：页面访问出现404
这个时候应该是你的nginx配置出现了问题，自己需要排除nginx配置
2：页面没有出现404， 但是页面出现空白
这个时候你要考虑你的vue项目配置是否有问题，打包有没有问题
结束----------------------------------------------------------------------------------