vue渐进式框架-项目部署及上线

前言

注：有很多都是面试题哦！

---

一、vue项目打包上线时一般要做什么？

• 在vue.config.js中配置一个publicPath字段，给资源路径加上一个前缀。
• 考虑图片是否需要做优化，要是需要就进行图片的模块化，然后向运维要访问的路径，写到baseURL上。
• 考虑api的baseURL，修改为远程服务器的地址。

---

二、但多页面应用程序的原理

• vue.config.js中有一个pages字段，使用这个字段可以配置多页面应用程序。工作中一般做的是单页面应用程序，如果要做多页面的应用程序就要使用到这个字段，不需要路由，通过超链接进行跳转，而单页面应用程序则是通过路由的创建与销毁来进行跳转的。

---

三、vue.config.js的配置一般都做什么？

• 做本地服务代理的处理 devServer
• 改端口号 port
• 给资源路径加前缀 publicPath
• 多页面应用程序的配置 pages

---

四、项目部署

1、购买域名

• .com 全球可访问（除人为干预）
• .cn 中国境内可以访问
• .org 政府、公益团体专属，个人使用备案通过不了

2、备案

• 备案表（盖手印）
• 身份证正反面图片
• 备案幕布图片
• 等待21个工作日

3、买云服务器

• 远程服务器一般是linux系统
• 使用ssh连接工具访问远程的ECS服务器
• 安装Nginx服务器、数据库软件、git

4、前端代码打包

• 打包时要考虑一下问题
• api 的baseURL
• img 的baseURL
• publicPath
• 上传代码至私密的git远程仓库，这个仓库是开源的，要使用不开源的gitlab是收费的，码云不收费。

5、ESC上部署操作

• 拉取前端代码至ESC机器上
• 安装Nginx 配置Nginx.conf服务
• 启动Nginx服务

6、DNS域名解析

• 把更容易记忆的域名，解析成对应的复杂的外网IP地址

7、网站就正常运行了

---

五、浏览器输入url访问一个地址时发生了什么？

• 浏览器把域名发送到了DNS域名解析
• DNS把IP地址返回给前端
• 前端向这个IP建立TCP连接
• TCP连接建立成功
• 浏览器发送HTTP请求，把www…的页面给我
• 客户端HTTP响应，这是www…的页面
• 浏览器渲染并展示HTML

---