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

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

但是当经理对我们说，你打一个测试包发给我/你打一个生成包发给我，这个时候**涉及到了多环境的打包**怎么办呢，接下来就以小编的理解**说说：打包的情况**


#### 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.start nginx.exe // cmd命令进入nginx文件夹后，使用该命令
2.直接点击nginx目录下的nginx.exe

// 停止服务
nginx -s stop // 快速停止nginx
nginx -s quit // quit是完整有序的停止nginx

//重新加载配置文件
nginx -s reload // 热加载

#### 2.2.2 默认配置


**nginx-1.21.0\conf下的nginx.conf**

工作进程的数量

worker_processes 1; # 与worker_connections乘积表示实际处理事件的总数
events {
worker_connections 1024; # 每个工作进程连接数
}

http {
include mime.types; # 文件扩展名与文件类型映射表
include self/ *.conf; # 独立出不同网站不同配置文件,引入其他的配置文件
default_type application/octet-stream; # 默认文件类型

# 日志格式
log_format  access  '$remote_addr - $remote_user [$time_local] $host "$request" '
              '$status $body_bytes_sent "$http_referer" '
              '"$http_user_agent" "$http_x_forwarded_for" "$clientip"';
access_log  /srv/log/nginx/access.log  access; # 日志输出目录
gzip  on; # gzip模块设置，设置是否开启gzip压缩输出
sendfile  on; # 开启文件传输模式
#tcp_nopush  on; # 减少网络报文数量

#keepalive_timeout  0; # 连接不超时，单位 s
# 链接超时时间，自动断开
keepalive_timeout  60;

# 虚拟主机
server {
    listen       80; # 监听地址以及端口
    server_name  localhost; # 浏览器访问域名

    charset utf-8; # 默认字符集
    access_log  logs/localhost.access.log  access;

    # 路由
    location / {
        root   html; # 访问根目录 nginx-1.21.0\html
        index  index.html index.htm; # 入口文件,可以接收index、index.html、index.htm文件
    }
}

}

#### 2.2.3 搭建不同网站的站点


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


![](https://img-blog.csdnimg.cn/e19edeca0fd44ce9864ddba290ac84e6.png)

server {
listen 8070; # 自定义监听端口
server_name 127.0.0.1; # 浏览器访问域名

charset utf-8;
access_log  logs/xx_domian.access.log  access;

# 路由
location / {
    root   dist; # 访问根目录 nginx-1.21.0\dist
    index  index.html index.htm; # 入口文件类型
}

}

![](https://img-blog.csdnimg.cn/e6f4a8f7c67c44efad2ff6c6e526803e.png)


![](https://img-blog.csdnimg.cn/75492e722d4144b09f35f0794dd8b5e0.png)


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

#禁止访问的文件或目录
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
{
    return 404;
}

#一键申请SSL证书验证目录相关设置
location ~ \.well-known{
    allow all;
}

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

# location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
# {
#     expires      30d; // 30天过期
#     access_log off;
# }

# location ~ .*\.(js|css)?$
# {
#     expires      12h;
#     access_log off; 
# }

#### 2.2.6 禁止文件缓存

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

#### 2.2.7 跨域问题


场景：


        -- 我们前端使用的路径配置为：[http://127.0.0.1:8070/]( )(nginx配置)


![](https://img-blog.csdnimg.cn/7c56651b8696487bbe5ea6f2ed2a489d.png)


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


![](https://img-blog.csdnimg.cn/f3c97aa39f6f42e5afef4c4dbdb27d8b.png)


此时前端向后端发送请求一定会出现跨域！！


**解决方法：**启动nginx服务器，**将server\_name设置为127.0.0.1****，然后设置响应的拦截前端需要跨域的请求置相应的location以拦截前端需要跨域的请求，最后将请求代理回自己需要请求的后端路径**，以我的为例：

server
{
listen 8001;
server_name 127.0.0.1;

location /api/ {
     proxy_pass  http://192.168.1.19:8087/;
     proxy_http_version 1.1; # http版本
     proxy_set_header Upgrade $http_upgrade; # 继承地址，这里的$http_upgrade为上面的proxy_pass
     proxy_set_header Connection "upgrade"; 
     proxy_set_header  X-Real-IP $remote_addr; # 传递的ip
     proxy_connect_timeout 60;
     proxy_send_timeout  60;
     proxy_read_timeout 3000;
}

}

**这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道**

### HTML

*   HTML5有哪些新特性？

*   Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

*   如何实现浏览器内多个标签页之间的通信？

*   ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

*   简述⼀下src与href的区别？

*   cookies,sessionStorage,localStorage 的区别？

*   HTML5 的离线储存的使用和原理？

*   怎样处理 移动端 1px 被 渲染成 2px 问题？

*   iframe 的优缺点？

*   Canvas 和 SVG 图形的区别是什么？


![](https://img-blog.csdnimg.cn/img_convert/476288e164f5711c5c11e55a79185bd8.png)



### JavaScript

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

*   问：0.1 + 0.2 === 0.3 嘛？为什么？

*   JS 数据类型

*   写代码：实现函数能够深度克隆基本类型

*   事件流

*   事件是如何实现的？

*   new 一个函数发生了什么

*   什么是作用域？

*   JS 隐式转换，显示转换

*   了解 this 嘛，bind，call，apply 具体指什么

*   手写 bind、apply、call

*   setTimeout(fn, 0)多久才执行，Event Loop

*   手写题：Promise 原理

*   说一下原型链和原型链的继承吧

*   数组能够调用的函数有那些？

*   PWA使用过吗？serviceWorker的使用原理是啥？

*   ES6 之前使用 prototype 实现继承

*   箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

*   事件循环机制 （Event Loop）


![](https://img-blog.csdnimg.cn/img_convert/0ba8bcdea9cbbc7373d2fa90b1951a07.png)