Vue项目history模式下nginx如何配置

首先，可以修改 vue.config.js 中的 publicPath ：

使用以下命令查看nginx所在目录：

然后根据查看到的目录，假设为 /usr/local/nginx ，那么就可以执行：

在 location / 同级处添加：

然后重启nginx

API 接口代理

我们一般做vue的项目都会配置接口代理，比如以 /API 径开头的请求都代理到本机的3000端口

那么问题来了这里的配置只有在本机没打包的时候才有效的，打包之后/API 径开头的请求就不会代理了，上传到服务器后

如何解决呢？

办法来了！！！

我的后台服务是node的，也部署在同一个服务器，开启的是3000端口

看如下nginx配置

好了看上面配置后面的注释吧，就这样配置绝逼没问题

域名/地址： www.yourDomain.com

项目 A：projectA（最终打包出来的文件夹名称）

项目 B：projectB（最终打包出来的文件夹名称）

想要最终的访问方式：

默认 vue-router 会配置如下：

再来看一下 vue.config.js 的配置

接着来配置 nginx

保存配置，重启 nginx 或者重新加载 nginx 配置

域名/地址： www.yourDomain.com

项目：project（最终打包出来的文件夹名称）

首先 vue-router 的文件不用动，去修改 vue.config.js 的 publicPath

nginx 中配置

---