详解基于Vue，Nginx的前后端不分离部署教程_前后端不分离项目怎么部署 - CSDN文库

前后端不分离

5星 · 超过95%的资源 7 浏览量更新于2023-10-24 评论收藏 81KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详解基于详解基于Vue，，Nginx的前后端不分离部署教程的前后端不分离部署教程

主要介绍了详解基于Vue，Nginx的前后端不分离部署教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小

编过来看看吧

有小伙伴私信问我vue项目是如何进行前后端不分离打包发布的，那我岂能坐视不管，如此宠粉的我肯定是要给发一篇教程的，话不多说，开始操作

前端假如我们要发布我们的Vue项目，假设我们前端用的是history路由(要发就发个全套的)，并且在后端带有一个二级目录，以便于可以在服务器上

部署N个项目，在这里后台服务器的话，我用Nginx服务器来给大家模拟，接下来就面对疾风吧：

一、在这里我前端一、在这里我前端vue项目使用项目使用vue cli脚手架进行搭建的，后台使用脚手架进行搭建的，后台使用Nginx，首先是前端配置：，首先是前端配置：

1.前端配置,在这里假如后端访问的时候要访问my-app文件夹下的打包好的dist文件夹，所以我们要在前端做一些配置

① 在vue.config.js文件中添加如下配置( 在这里我们手动在src文件夹下面创建vue.config.js文件，相当于给webpack添加了新的配置 )：

baseUrl:'/my-app/'

② router路由的配置(相信你知道这个配置应该放到哪吧，毕竟都已经到了发布的操作了)：

const router = new VueRouter({

mode:"history",

base:'/my-app/',

routes

})

2.接下来就是我们前端的打包接下来就是我们前端的打包

① 因为在这里我使用的vue cli搭的项目，所以直接执行yarn build进行打包，你会发现多了个dist文件夹，这里面就是打包过后生成的文件

② 在这里简单解释下打包后js和css文件自动加了版本号的基本作用：可以进行版本回退，唯一标识。

③ 在这里我们模拟把打包好的文件夹交给后端，所以我将打包好的dist文件夹放到一个我创建好的文件夹nginx-root文件夹里面，并且放到my-app

文件夹

你看，它就安静的躺在这里，慈祥又安和

二、接下来就是我们后端服务器二、接下来就是我们后端服务器Nginx的操作的操作

1.既然是教程，那就彻底手把手教学，第一步我们要先下载一个Nginx服务器，完全手把手，彻底手把手，不要九块九，更不要九十九，别太感动

① 去nginx.org下载一个Nginx，在右侧找到download点进去，在这里我们可以下载Stable version下面的 nginx/Windows-1.14.1 这个版本，

链接地址：http://nginx.org/en/download.html

② 然后将下载好的压缩包解压后放到你的本地磁盘里

③ 给Nginx配置环境变量，相信大家应该都知道怎么配环境变量把，不知道怎么配环境变量可以私聊我，在这里就不做过多解释了，直接讲解下一

步操作

2.开始Nginx的配置

① 在你的 nginx(应该是nginx-1.14.1)文件夹中打开命令行，执行命令： start nginx

//开启nginx服务器，执行完该命令后，如果你的命令控制工具闪了一下，并且光标悬停一闪一闪放光芒，此时你就可以在你的浏览器上输入

localhost，按下回车，如果出现了Welcome to nginx！，恭喜你，你已经成功开启nginx服务器的封印了

② 在编译器中，将你的 nginx文件夹下找到 conf文件夹，然后进入到 nginx.conf文件，找到server，将server和括号里面的内容用#注释掉(注释的时

候要小心，不能注释多也不能注释少，一定要精准，精准你懂吧)

③ 在conf文件夹下创建一个 conf.d文件夹 (该名字随意起)，在这里我们可以在conf.d文件夹下创建一个 test.conf文件，在后期你可以创建多个.conf

文件，来配置你的多个项目的server

④ 在nginx.conf文件中把这行代码在http括号里面找个地方放下，include后面跟的是你conf.d文件夹的绝对路径，这句代码的意思就是匹配下面所有

的conf文件，这是我的，你把后面的路径改成你的就可以，注意要把斜杠改成反斜杠/

include D:/nginx-1.14.1/conf/conf.d/*.conf　　//这是我的，你把路径改成你的conf.d的绝对路径就可以，注意斜杠是'/'不是'\'

⑤ 在你的test.conf文件中添加配置信息，这是配置信息的解释，大家可以根据我的配置信息demo来配置你的

server {

listen 80; ------端口号

server_name localhost; ------域名

root 你的dist文件夹的绝对路径; ------根

autoindex on; ------将你匹配的文件自动匹配到index.html

expires 1s; ------缓存(只是为了演示才写的)

charset utf-8;

location /匹配路径{

proxy_pass 接口反向代理的目标target; ------在这里配置你的反向代理，若要配置多个代理路径，将此代码复制多个修改即可

}

location / {

　　　　　　try_files $uri $uri/ /index.html;　　 ------这是从vue官网抄过来的配置，意义在于保证一旦我们的路由刷新的时候一旦后端找不到对应的路由，将自动跳转到index.html文件

}

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论10

食色也

2023-06-17

对于初学者来说，这篇文章的难度刚刚好，既不过于简单，也不过于复杂。

weixin_38593738

粉丝: 0
资源: 925

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈