进化包--vue怎么在nginx下部署

Posted 2021-04-11 入坑互联网

关注 入坑互联网 ，回复“加群”

前言

看到本文后，肯定很多前端开发会思考为什么前端跟部署有关系，没错，一般的公司部署都会是由架构师或者说后端人员负责，但是这只是你以为而已，在一些小公司需要你的全能，而且我相信作为一个程序员肯定某一天会有种做出自己的东西运行一下的想法，但是这个时候如果是你自己一个人在创作，你能找谁帮忙呢？不如靠自己对吧，而且技多不压身的，来吧！就让我们来一起学习一下！

安装Nginx

以windows版为例，下载niginx压缩包并解压到任意目录，双击nginx.exe，在浏览器中访问http://localhost，如果出现Welcome to nginx!页面则说明成功。

nginx常用命令：

nginx -h # 打开帮助nginx -t # 检查配置文件是否正确
# 以下命令均要先启动nginx才能执行nginx -s stop # 停止nginx -s quit # 退出nginx -s reopen # 重新启动（注意不会重新读取配置文件）nginx -s reload # 重新读取配置文件

打包vue项目：npm run build

vue项目打包后，是生成一系列的静态文件，包括项目的请求IP都打入包内，如果后台服务改动，这时你的前端文件，又要重新编译打包，这里采用的是后台管理项目总结提到的前端自行请求一个配置文件，动态修改你的相关配置。

请求文件

// api.jsGetConfigApi() { return new Promise((resolve, reject) => { axios .get(`/config.json?v=${new Date().getTime()}`) .then(result => { const configApi = { API: result.data['api'], // 统一接口 }; resolve(configApi); }) .catch(error => { reject(error); }); });}

nginx部署

在vue项目根目录中使用命令npm run build创建输出文件，将dist文件夹下的所有内容复制到nginx目录下的webapp/内（没有的话自行创建）。

因为vue-router有hash和history不同的两种模式，使用不同的模式，nginx的配置不同，hash模式下，不需要改动，只需要部署你的前端文件就可以了，所以这里只讨论history模式下.conf文件的修改

访问修改nginx配置文件nginx.conf

server { listen 80; server_name index.com;
 location / { root /front; // 前端文件路径 index index.html; // hash模式只配置访问html就可以了 try_files $uri $uri/ /index.html; // history模式下 }}

在nginx根目录使用命令nginx -s reload即可在浏览器中通过http://localhost访问项目。

部署到子级目录

当我们需要把项目部署到子级目录下时，则需要修改项目的BASE_URL，生成一个子级目录下的绝对访问路径。修改对应的.conf配置文件

server { listen 80; server_name test.com;
 location /demo { // 子级目录 alias /front/demo; index index.html; try_files $uri $uri/ /demo/index.html;  }}

缓存处理

前端项目的静态文件常常会被浏览器缓存，而项目编译后，js，css，图片等实际上是已经有hash值来去除了缓存，但是项目更新后，仍然会出现缓存问题，这是由于我们的项目整个入口都是在index.html文件上，浏览器实际是缓存了我们的html页面，所以我们要在nginx中告诉浏览器，html文件不被缓存。

location /demo { add_header Cache-Control 'private, no-store, max-age=0'; ...}

多个项目部署

有时一个Nginx中放了好几个子项目，需要将不同的项目通过不同的路径来访问。

对于项目1而言，修改vue.config.js文件的publicPath：

publicPath: '/vue1/'

对于项目2而言，修改vue.config.js文件的publicPath：

publicPath: '/vue2/'

分别在vue项目根目录中使用命令npm run build创建输出文件，将dist文件夹下的所有内容复制到nginx目录下的webapp/vue1和webapp/vue2内（没有的话自行创建）。

修改nginx目录中的conf/nginx.conf文件，在 http -> server 节点中，修改location节的内容：

location /vue1 { root webapp; index index.html index.htm;}
location /vue2 { root webapp; index index.html index.htm;}

在nginx根目录使用命令nginx -s reload即可在浏览器中通过http://localhost/vue1、http://localhost/vue2访问项目1、项目2。

部署到Nginx服务器--线上环境

将打包以后的dist文件夹压缩为zip文件，然后ssh工具将dist.zip文件传输到服务器，传输成功以后将当前的dist.zip文件通过unzip dist.zip 解压

Alt+p 快捷键打开linux 传输控制台，输入put dist.zip文件的绝对路径；例如：

put D:\WebStormProject\flight-service-station-operational-service-system\dist.zip

如下图说明传输成功:通过如下命令找到nginx.conf 文件

find / -name nginx.conf

打开nginx/conf/nginx.conf 文件,配置当前打包以后的dist文件路径

 server {  listen Vue项目的端口号; server_name localhost;
 #charset koi8-r;
 #access_log logs/host.access.log main;
 location / { root dist文件夹的路径，比如：/root/guobao/DataExchangePlatform/dist; index index.html index.html; } }

进入/usr/local/nginx/sbin 目录下，通过如下命令重新加载nginx配置

./nginx -s reload

通过服务器的IP:项目端口  既可以访问项目了!

启动ngin命令：

./nginx -c nginx.conf的文件路径，例如下面的命令./nginx -c /usr/local/nginx/conf/nginx.conf

总结：

到这里就已经带着大家一步步将vue项目部署在nginx下了，当然看是没有用的，我希望大家可以动起手来配置一下，俗话说得好熟能生巧，最后在唠叨一句就是不管日常工作中你是否需要掌握这个技能，技多不压身嘛！

❤️ 看完三件事

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1. 点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓）。
2. 关注公众号「入坑互联网」，不定期分享原创知识。
3. 也看看其它文章

- END -

结伴同行前端路