使用Nginx部署多个前端Vue项目

快来打我* 2022-10-18 13:59 349阅读 0赞

### Nginx部署多个Vue项目 ###

*   *  前言：
     *  第一步：vue项目中的配置
     *  第二步：修改Nginx上的配置文件
     *  最后：暂停nginx服务，重新开启即可。

## 前言： ##

*  细心很重要，其次就是对vue cli 生成的项目目录，了解多少，项目启动后，文件目录的文件，是怎么顺序被执行…

## 第一步：vue项目中的配置 ##

*  1.  创建vue.config.js 文件（该文件会被 @vue/cli-service 自动加载）详情见：https://cli.vuejs.org/zh/config/\#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]

*  2.  路由文件中配置，

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]

*  3.  在public中的index.html 配置

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]

## 第二步：修改Nginx上的配置文件 ##

*  1.  进入nginx目录下，在html文件夹下创建目录（这里的文件名zhong），然后将npm run build 打包后生成的dist文件夹中的文件copy到新创建的目录~zhong即可。（个人推荐，上传文件或创建文件夹使用fileZilla，将桌面的文件，拖到服务器对应的位置即可）

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]

*  2.  修改nginx下的配置文件（我自己一共配置了三个前端项目）

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 4]

## 最后：暂停nginx服务，重新开启即可。 ##

*  1. 启动nginx的命令为 /usr/local/nginx/sbin/nginx
 *  2. 停止nginx的命令为 /usr/local/nginx/sbin/nginx -s stop

> ![在这里插入图片描述][20210708121210277.png]

*  访问：http://域名/zhong/  或  http://ip:端口号/zhong/（细节很重要，域名后面的名称末尾不要忘记斜杠！）

> 若你是第一次配置，可以先配置一个项目的配置，其中有部分知识解析，见我另一篇：  
> https://blog.csdn.net/qq\_41930094/article/details/118153719?spm=1001.2014.3001.5502

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]: /images/20221005/97a8e4adf6444528bb47e5ec046a65d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]: /images/20221005/ed993b8dc8434e6ba9ef2666cda1fa9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]: /images/20221005/db556a6b368d40038ddec8ab089baae9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]: /images/20221005/14844bf6957c441298670a6273278c76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 4]: /images/20221005/36ba7abea434419ca5959429c5cbb54a.png
[20210708121210277.png]: /images/20221005/c2221c3fa4a3431aa239d9e2319517e3.png