nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打 ...

总结一下

口试前要经心做好预备，简历上写的知识点和原理都需要预备好，项目上多想想难点和亮点，这是口试时能和别人不一样的地方。
还有就是表现出本身的谦善好学，以及对于将来连续进阶的规划，企业招人更偏爱稳固的人。
开源分享：【大厂前端口试题剖析+核心总结学习条记+真实项目实战+最新讲解视频】
万事开头难，但是步伐员这一条路坚持几年后发展空间还黑白常大的，统统重在坚持。
为了帮助大家更好更高效的预备口试，特殊整理了《前端工程师口试手册》电子稿文件。

前端口试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，以是学习前端的小伙伴要留意了，一定要把技能学到踏实，做有含金量的项目，如许在找工作的时候无论碰到什么情况，问题都不会大。
2.1.1 打包下令

不用说肯定是npm run build肯定是没错的

1. npm run build 或者
2. yarn run build

复制代码

但是当经理对我们说，你打一个测试包发给我/你打一个生成包发给我，这个时候涉及到了多环境的打包怎么办呢，接下来就以小编的明确说说：打包的情况
2.1.2 明确npm run serve/dev 和 npm run build下令

   npm ERR!Missing script: “dev“npm ERR!npm ERR! To see a list of scripts, run（npm run serve/dev/build）_❆VE❆的博客-CSDN博客
  2.2 nginx参数配置明确

2.2.1 nginx常用基本下令

1. //开启服务
2. 1.start nginx.exe // cmd命令进入nginx文件夹后，使用该命令
3. 2.直接点击nginx目录下的nginx.exe
5. // 停止服务
6. nginx -s stop // 快速停止nginx
7. nginx -s quit // quit是完整有序的停止nginx
9. //重新加载配置文件
10. nginx -s reload // 热加载

复制代码

2.2.2 默认配置

nginx-1.21.0\conf下的nginx.conf

1. # 工作进程的数量
2. worker_processes  1; # 与worker_connections乘积表示实际处理事件的总数
3. events {
4.     worker_connections  1024; # 每个工作进程连接数
5. }
7. http {
8.     include       mime.types;  # 文件扩展名与文件类型映射表
9.     include       self/ *.conf; # 独立出不同网站不同配置文件,引入其他的配置文件
10.     default_type  application/octet-stream; # 默认文件类型
12.     # 日志格式
13.     log_format  access  '$remote_addr - $remote_user [$time_local] $host "$request" '
14.                   '$status $body_bytes_sent "$http_referer" '
15.                   '"$http_user_agent" "$http_x_forwarded_for" "$clientip"';
16.     access_log  /srv/log/nginx/access.log  access; # 日志输出目录
17.     gzip  on; # gzip模块设置，设置是否开启gzip压缩输出
18.     sendfile  on; # 开启文件传输模式
19.     #tcp_nopush  on; # 减少网络报文数量
20.    
21.     #keepalive_timeout  0; # 连接不超时，单位 s
22.     # 链接超时时间，自动断开
23.     keepalive_timeout  60;
25.     # 虚拟主机
26.     server {
27.         listen       80; # 监听地址以及端口
28.         server_name  localhost; # 浏览器访问域名
30.         charset utf-8; # 默认字符集
31.         access_log  logs/localhost.access.log  access;
33.         # 路由
34.         location / {
35.             root   html; # 访问根目录 nginx-1.21.0\html
36.             index  index.html index.htm; # 入口文件,可以接收index、index.html、index.htm文件
37.         }
38.     }
39. }

复制代码

2.2.3 搭建不同网站的站点

在其他配置文件’self’目次下，添加新建站点的配置文件’xxx.conf’

1. server {
2.     listen       8070; # 自定义监听端口
3.     server_name  127.0.0.1; # 浏览器访问域名
5.     charset utf-8;
6.     access_log  logs/xx_domian.access.log  access;
8.     # 路由
9.     location / {
10.         root   dist; # 访问根目录 nginx-1.21.0\dist
11.         index  index.html index.htm; # 入口文件类型
12.     }
13. }

复制代码

2.2.4 禁止访问的目次以及一键申请SSL证书验证目次相关设置

1.     #禁止访问的文件或目录
2.     location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
3.     {
4.         return 404;
5.     }
6.    
7.     #一键申请SSL证书验证目录相关设置
8.     location ~ \.well-known{
9.         allow all;
10.     }

复制代码

2.2.5 根据文件类型设置逾期时间

1.     # location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
2.     # {
3.     #     expires      30d; // 30天过期
4.     #     access_log off;
5.     # }
6.    
7.     # location ~ .*\.(js|css)?$
8.     # {
9.     #     expires      12h;
10.     #     access_log off;
11.     # }

复制代码

2.2.6 禁止文件缓存

1. location ~* \.(js|css|png|jpg|gif)$ {
2.     add_header Cache-Control no-store;
3. }

复制代码

2.2.7 跨域问题

场景：
– 我们前端使用的路径配置为：http://127.0.0.1:8070/(nginx配置)

– 需要向后端哀求的路径为： http://192.168.1.19:8087/(项目打包配置)

此时前端向后端发送哀求一定会出现跨域！！
解决方法：启动nginx服务器，将server_name设置为127.0.0.1，然后设置响应的拦截前端需要跨域的哀求置相应的location以拦截前端需要跨域的哀求，最后将哀求署理回本身需要哀求的后端路径，以我的为例：

1. server
2. {
3.     listen 8001;
4.     server_name 127.0.0.1;
6.     location /api/ {
9. ###  总结
11. 大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
13. **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
15. 

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。