一个小伙伴私下问我vue项目是怎么发布的，没有分离包装。那我可以袖手旁观。我肯定会给这样的宠物粉发一个教程。我不多说，开始操作

前端如果我们想发布我们的Vue项目，我们假设我们的前端使用历史路由(如果想发送就发送一个完整的集合)，后端有一个二级目录，这样就可以在服务器上部署N个项目。如果后端服务器在这里，我就用Nginx服务器给大家模拟一下，然后面对大风：

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

1.前端配置。这里，如果后端访问my-app文件夹下的打包dist文件夹，我们需要在前端做一些配置

将以下配置添加到vue.config.js文件中(这里我们在src文件夹下手动创建vue.config.js文件，相当于在webpack中添加了新的配置):

Baseurl :'/my-app/'2路由器路由配置(相信你知道这个配置应该放在哪里，毕竟已经发布了):

const router=new vue router({ mode : ' history '，base:'/my-app/'，routes}) 2。下一步是我们前端的封装

(1)因为我在这里使用的是vue cli构建的项目，所以我会直接执行纱线构建进行打包，你会发现有一个额外的dist文件夹，这是打包后生成的文件

这里简单说明一下自动给打包好的js和css文件添加版本号的基本功能：版本回滚和唯一标识都是可以的。

在这里，我们模拟将打包的文件夹交给后端，所以我将打包的dist文件夹放入我创建的文件夹nginx-root中，并将其放入我的-app文件夹中

你看，它静静地躺在这里，善良而安宁

其次，下一步是我们后端服务器Nginx的操作

1.既然是教程，就要教透彻。第一步是下载一个Nginx服务器，完全手把手，完全手把手，不要九，更不要九十九，不要太感动。

去Nginx.org下载一个nginx，找到右边的下载点，我们可以在稳定版下下载nginx/Windows-1.14.1。

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

2然后解压缩下载的压缩包，并将其放在本地磁盘上

为Nginx配置环境变量。我相信每个人都应该知道如何匹配环境变量。如果你不知道如何匹配环境变量，你可以私下和我谈谈。这里就不多解释了，直接说明下一步

2.启动Nginx的配置

打开您的nginx(应该是nginx-1.14.1)文件夹中的命令行，执行命令：启动nginx

//打开nginx服务器。执行此命令后，如果您的命令控制工具闪烁，并且光标悬停和闪烁，您可以在浏览器中输入localhost并按enter。如果欢迎来到nginx出现！恭喜您，您已成功打开nginx服务器的印章

(2)在编译器中，找到你的nginx文件夹下的conf文件夹，然后进入nginx.conf文件，找到服务器，用#(注释的时候要小心，注释不要太多也不要太少，要精准，你懂的)

在conf文件夹下创建一个conf.d文件夹(名称随意开头)，我们可以在conf.d文件夹下创建一个test.conf文件，以后可以创建多个。配置多个项目的服务器。

在nginx.conf文件中，找到一个地方将这一行代码放在http括号中。include后面是conf.d文件夹的绝对路径。这段代码的意思是匹配下面所有的conf文件。这是我的。你可以改变你后面的路。注意将斜杠改为反斜杠/

包括d :/nginx-1 . 14 . 1/conf/conf . d/*。这是我的。您可以将路径更改为配置文件的绝对路径。请注意，斜线是“/”而不是“”

将配置信息添加到您的test.conf文件中，这是对配置信息的解释。您可以根据我的配置信息演示来配置您的。

服务器{ listen 80-端口号server _ name localhost-您的dist文件夹的域名根目录的绝对路径；-root autoindex on；--缓存(仅为演示而写)字符集utf-8；位置/匹配路径{ proxy _ pass接口反向代理的目标；-在此配置您的反向代理。要配置多个代理路径，请复制此代码进行多次修改。} location/{ try _ files $ uri $ uri//index . html；-

服务器{ listen 80server _ name localhostroot e :/nginx-root/dist；自动索引打开；字符集utf-8；位置/索引/热点列表{ proxy _ pass http://www.baidu.com；} location/{ try _ files $ uri $ uri//index . html；} }6.最后，准备好享受成功的喜悦

重新启动Nginx服务器，浏览器将访问您的端口号localhost:这里我设置了默认值80，你的是可选的，但是最好设置为80。当您按回车键时，您的项目已经开始。恭喜，部署成功。现在，双手离开键盘，摘下耳机，你就可以欢呼了！

第三，最后给大家一个总结，总结一下本地部署中用到的一些命令

启动nginx //启动nginx服务nginx -s stop//关闭nginx服务(您可以通过关闭它来重新启动nginx服务)。dist文件夹下的纱线构建//打包项目。以上就是本文的全部内容。希望能帮助大家学习，支持我们。