Vue 应用 nginx 配置 前后端不分离模式

时间:2021-01-27 21:09:46

一、先在官网下载nginx 软件,解压后放在软件盘中如D盘

Vue 应用 nginx 配置 前后端不分离模式

将nginx 文件夹拖到编译器中,打开conf 文件夹中的 nginx.conf 文件,找到其中的server {} 配置项,默认35 行。将默认的 server 配置全部用 # 注释掉,之后再 conf 文件夹中创建文件夹 conf.d ,创建文件 test.conf,在该文件中进行server {} 配置项的 配置。

Vue 应用 nginx 配置 前后端不分离模式

 

 

二、配置server 

配置之前需要在 nginx.conf 文件中的 http {} 配置项里加上 include D:/nginx-1.14.1/conf/conf.d/*.conf; 进行文件的映射,加上后才可以找到我们在 conf.d 问件中创建的 .conf 问件,而且是所有的 .conf 文件。如果有多个 .conf 文件则会一起启动,而只想让其中一个启动可以将 * 号改为那个文件的文件名。

 

server配置:

 

listen 8999;  是配置的端口号

server_name localhost;  是配置的域名

root D:/nginx-root;  是配置的资源路径

autoindex on;  是配置的打开页面是否能进入文件列表页,on为能进入,off 为不能进入

charset utf-8;  是编码格式

 

如果不配置autoindex on; 且你的 root 目录下没有东西,服务启动后可能会报 403 Forbidden 错误,这时加上这个配置就能避免这个错误。

 

在nginx.exe 所在文件夹里,上图的 nginx-1.14.1文件夹中,进入命令窗口,输入 start nginx 启动 nginx 出现以下界面则nginx 启动成功。

 下图是 成功进入列表页的显示

Vue 应用 nginx 配置 前后端不分离模式

 

配置以上这些后少不了要配置反向代理,反向代理到 json-server启动的 mock 数据的服务上,配置方法如下

location /api {
  proxy_pass http://localhost:8085;
}
 
可以配置多个反向代理
 
 
在输入地址后,一般会想让页面进入首页而不是列表页,这是要进行配置,本应用是Vue 的,所以从Vue 官网上拿到如下配置,并进行改进:
location / {
  try_files $uri $uri/dist /dist/index.html;
}
其中默认配置第二个 $uri 后是没有 /dist的,后面也没 /dist 是 
try_files $uri $uri /index.html; 。
加上的原因是之后的资源不是直接放在 D:/nginx-root 目录下的,而是在其中的 dist 文件夹中,这是如果是官网的默认配置就会找不到对应的 index.html文件,加上 /dist 后就行了。
 
为什么我们要资源放在 dist 文件夹中,而不是放在 nginx-root 文件目录下?是应为我们可能在 nginx-root 下放了其他的应用的资源,为了防止混乱所以就放在 nginx-root 下的文件夹 dist 下。
 Vue 应用 nginx 配置 前后端不分离模式

 

 
 
三、Vue 应用的小修改
与上面相对应,在给Vue 应用进行 yarn build 之前需要进行修改在 vue.config.js 文件的 module.export 暴露的对象中加上  baseUrl: '/dist/',
Vue 应用 nginx 配置 前后端不分离模式

还要再路由中,在实例化 VueRouter 的配置中加上 base: '/dist/',

 Vue 应用 nginx 配置 前后端不分离模式

之后直接 yarn build 就行了 ,build 出的文件在所有引用的文件路径前自动加上 /dist/ 。

 

 四、启动应用

将 build 好的 dist 文件夹拷贝到 nginx-root 目录下,在命令窗口输入start nginx启动 nginx,在浏览器窗口输入localhost:8999,就进入了我们的应用了。到这就正式完成 Vue.js 项目 前后端不分离模式 nginx 配置。

 

五、nginx 配置中的坑

 在 .conf 文件中进行配置时,一定要记住加上 ; ,不加会报错;

在放置解压后的 nginx-1.14.1 文件夹时,目录时一定不能有中文空格 ,也会报错

在判断 nginx 是否启动成功时,不止直接去浏览器输入域名和端口号,也可以直接 nginx -s stop 停止nginx 看是否有错误,如果什么都没有显示,那么恭喜启动成功了,否则会报错。

 

 

 

如有错误,请各位指正!