普通的nginx配置.

没啥可说的,打包文件丢到html目录下.nginx使用默认配置即可.

跨域状态下做接口转发的nginx配置.

前端部署域名和后端接口域名不相同是个很普遍的现象.
对此,跨域方案主要有两种:

• 后端接口配置CORS允许跨域.
• 前端容器使用nginx转发解决跨域.

此处专门介绍第二种方式:

在前端应用中给接口请求加上前缀,例如/user/login改为/api/user/login

axios.defaults.baseURL = "/api";

在ngxin中通过location配置增加对指定请求的转发.

default.conf

location /api/ {
    proxy_pass   http://api-abc.com.cn/;
}

history模式配置.

vue路由在history模式下,地址栏表现得比较正常.但缺点是首页以外的页面不能刷新,否则会出现404.
原因是nginx是根据路径查找资源,router伪造的路径显然是在nginx中不存在的.
解决方案:设置兜底的资源查找路径即可.

location / {
    try_files $uri $uri/ /index.html;
}

try_files:按顺序指定资源查找路径

1. 访问http://www.testdomain.com/abc时$uri为/abc,处理顺序: 会先找root目录下的/abc文件，也就是/html/abc这个文件，找到直接返回。
2. $uri/也就是/abc/目录，找不到再尝试找/html/abc/目录下的index开头的文件，找到直接返回。
3. 如果前面文件都没匹配找到，就会使用try_files的最后一个选项/index.html，请求http://www.testdomain.com/index.html并返回.

root目录:默认为/nginx安装目录/html/

子目录部署.

在某些业务场景下(比如域名不够用),前端工程可能需要部署到子目录下.
例如:http://www.testdomain.com/abc/
对于vue项目而言,需要在打包时稍作修改.

vue.config.js

publicPath: process.env.VUE_APP_ENV === 'production'? '/':'/abc/',

子目录+history模式.

增加一条location配置即可:

location /abc/ {
    try_files $uri $uri/ /abc/index.html;
}

子目录+静态资源路径.

若项目中使用了如下静态资源路径.则无法在子目录部署下打开对应资源.

<img src="static/img/user_icon.png">

原因是绝对路径默认根据域名进行拼接.实际加载的资源路径为
http://www.testdomain.com/static/img/user_icon.png

而图片存放路径为
http://www.testdomain.com/abc/static/img/user_icon.png.

继续使用nginx做转发:

方案一:修改资源查找根路径.

location /static/ {
    root html/abc/;
}

location:资源匹配条件.
root:指定资源查找的根路径.

方案二:使用别名修改资源查找路径.

location /static/ {
    alias html/abc/static/;
}

alias:替换对应的路径字段.

两个方案最终产生如下效果:
web服务器会在html/abc/目录查找static/img/user_icon.png文件.

上述例子中路径均使用的相对路径,其相对的路径为nginx安装目录.

结束.