2024年Web前端最新nginx部署vue项目及nginx配置_vue nginx 项目路径(1)，2024年最新前端面试总结

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

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

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

nginx部署vue项目,vue.conf.js配置文件默认配置publicPath为根路径 publicPath：‘/’，只需要打包好dist包，部署nginx即可，根据前端配置好的axios请求前缀baseUrl='prod-api'，配置拦截，跳转代理的后台接口即可。

   location / {
            root   /home/projects/web_front; 
            #当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，
            #例如：user/getByid/1 ,使用hash模式无此问题
            try_files $uri $uri/ /index.html;  
            index  index.html index.htm;
        }

当某些应用部署在内部网络，通往外网只放行了一个端口时，nginx需要配置统一端口的的多应用服务器（一个server内配置多个应用的时候例如电脑端访问http://x.x.x.x:8080,访问电脑端，http://x.x.x.x:8080/app时访问H5端），需要在vue.conf.js配置文件配置publicPath，例如 publicPath：‘/app’，当使用 publicPath：‘/app’时，需要配置配置nginx的location选项，将location的root配置项目改为alias。

 location ^~app {
            alias   /home/projects/h5_front;
            #当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，
            #例如：user/getByid/1 ,使用hash模式无此问题
            try_files $uri $uri/ /index.html;  
            index  index.html index.htm;
        }

因为 nginx的location获取到匹配路径(/app)之后，root配置会使用ip+端口的方式请求nginx获取服务器的静态资源，(例如：http://x.x.x.x:8080/aaa.img),而使用alias配置时，会使用ip+端口+匹配的路径访问服务器静态资源,(例如：http://x.x.x.x:8080/app/aaa.img),此时可以正常访问服务器资源。不然会出现报错，找不到服务器静态资源。

nginx配置

server {
        listen       8080;
        server_name  localhost;
		#例如：/ 根路径为电脑端
        location / {
            root   /home/projects/web_front; 
            #当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，
            #例如：user/getByid/1 ,使用hash模式无此问题
            try_files $uri $uri/ /index.html;  
            index  index.html index.htm;
        }
        #例如：/app 路径为移动H5端
 location ^~app {
            alias   /home/projects/h5_front;
            #当项目的vue-router使用history模式时，刷新界面会空白，或使用有参数的url时候会找不到地址，
            #例如：user/getByid/1 ,使用hash模式无此问题
            try_files $uri $uri/ /index.html;  


**ES6**

*   列举常用的ES6特性：

*   箭头函数需要注意哪些地方？

*   let、const、var

*   拓展：var方式定义的变量有什么样的bug？

*   Set数据结构

*   拓展：数组去重的方法

*   箭头函数this的指向。

*   手写ES6 class继承。

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

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

**微信小程序**

*   简单描述一下微信小程序的相关文件类型?

*   你是怎么封装微信小程序的数据请求？

*   有哪些参数传值的方法？

*   你使用过哪些方法，来提高微信小程序的应用速度？

*   小程序和原生App哪个好？

*   简述微信小程序原理？

*   分析微信小程序的优劣势

*   怎么解决小程序的异步请求问题？

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