2024年前端最全Vue项目打包部署总结，阿里巴巴前端面试都问些什么

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

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

如果你只是想体验一下，可以尝试各大厂的云服务器免费试用套餐，比如华为云免费试用，本文相关操作即是在华为云上完成的。不过如果想时常练练手，我觉得可以购买一台云服务器，比如上面的华为云或者阿里云都还挺可靠。我的个人网站就是部署在阿里云，你可以点击我的推广链接进行购买，近期有活动首次购买不到100块/年。

2. nginx安装和启动

轻装简行，这部分不作过多赘述（毕竟网上相关教程一大堆），正常情况下仅需下面两个指令：

# 安装，安装完成后使用nginx -v检查，如果输出nginx的版本信息表明安装成功

sudo apt-get install nginx

# 启动

sudo service nginx start

启动后，正常情况下，直接访问 http://服务器ip 或 http://域名 （本文测试用的服务器没有配置域名，所以用ip，就本文而言，域名和ip没有太大区别）应该就能看到nginx服务器的默认页面了——如果访问不到，有可能是你的云服务器默认的http服务端口（80端口）没有对外开放，在服务器安全组配置一下即可。

Vue项目打包发布问题汇总

3. 了解nginx: 修改nginx配置，让nginx服务器代理我们创建的文件

查看nginx的配置，linux系统下的配置文件通常会存放在/etc目录下，nginx的配置文件就在/etc/nginx文件夹，打开文件/etc/nginx/sites-available/default（nginx可以有多个配置文件，通常我们配置nginx也是修改这个文件）：

Vue项目打包发布问题汇总

可以看到默认情况下，nginx代理的根目录是/var/www/html，输入 http://服务器ip会访问这个文件夹下的文件，会根据index的配置值来找默认访问的文件，比如index.html、index.htm之类。

我们可以更改root的值来修改nginx服务代理的文件夹：

1. 创建文件夹/www，并创建index.html，写入"Hello world"字符串

mkdir /www

echo ‘Hello world’ > /www/index.html

2. 修改root值为 /www

3. sudo nginx -t 检查nginx配置是否正确

4. 加载nginx配置：sudo nginx -s reload

再次访问页面，发现页面内容已经变成了我们创建的index.html:

Vue项目打包发布问题汇总

二、Vue项目打包同步文件到远程服务器

---

1. 打包

默认情况下，使用vue-cli创建的项目，package.json里的script应该已经配置了build指令，直接执行yarn build 或者 npm run build即可。

2. 同步到远程服务器

我们使用nginx部署Vue项目，实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹。之前的步骤已经介绍了怎样配置nginx指向我们创建的文件夹，剩下的问题就是怎么把打包好的文件同步到服务器上指定的文件夹里，比如同步到之前步骤中创建的/www。同步文件可以在git-bash或者powershell使用scp指令，如果是linux环境开发，还可以使用rsync指令:

scp -r dist/* root@117.78.4.26:/www

或

rsync -avr --delete-after dist/* root@117.78.4.26:/www

注意这里以及后续步骤是root使用用户远程同步，应该根据你的具体情况替换root和ip(ip换为你自己的服务器IP)。

为了方便，可以在package.json脚本中加一个push命令，以使用yarn为例（如果你使用npm，则push命令中yarn改成npm  run即可）：

“scripts”: {

“build”: “vue-cli-service build”,

“push”: “yarn build && scp -r dist/* root@117.78.4.26:/www”

},

这样就可以直接执行yarn push 或者npm run push直接发布了。不过还有一个小问题，就是命令执行的时候要求输入远程服务器的root密码（这里使用root来连接远程的，你可以用别的用户，毕竟root用户权限太高了）。

为了避免每次执行都要输入root密码，我们可以将本机的ssh同步到远程服务器的authorized_keys文件中。

3. 同步ssh key

1. 生成ssh key：使用git bash或者powershell执行ssh-keygen可以生成ssh key。会询问生成的key存放地址，直接回车就行，如果已经存在，则会询问是否覆盖：

2. 同步ssh key到远程服务器，使用ssh-copy-id指令同步

ssh-copy-id -i ~/.ssh/id_rsa.pub root@117.78.4.26

输入密码后，之后再次同步就不需要输入密码了。其实ssh_key是同步到了服务器（此处是root用户家目录）~/.ssh/authorized_keys文件里：

当然你也可以手动复制本地_{/.ssh/id_rsa.pub（注意是pub结尾的公钥）文件内容**追加**到服务器}/.ssh/authorized_keys的后面（从命名可以看出该文件可以存储多个ssh key）

注意：这里全程使用的是root用户，所以没有文件操作权限问题。如果你的文件夹创建用户不是远程登录用户，或许会存在同步文件失败的问题，此时需要远程服务器修改文件夹的读写权限（命令 chmod）。

创建了一个测试项目（点击本链接可以在gihub查看）[1]试一下，打包、文件上传一句指令搞定啦：

Vue项目打包发布问题汇总

访问一下，果然看到了我们熟悉的界面：

Vue项目打包发布问题汇总

至此，常规情况下发布Vue项目就介绍完了，接下来介绍非域名根路径下发布以及history路由模式发布方法。

三、非域名根路径发布

---

有时候同一台服务器同一端口下可能会根据目录划分出多个不同的项目，比如我们希望项目部署到http://a.com/test下，这样访问http://a.com/test访问到的是项目的首页，而非test前缀的地址会访问到其它项目。此时需要修改nginx配置以及Vue打包配置。

1. nginx配置

只需要添加一条location规则，分配访问路径和指定访问文件夹。我们可以把/test指向之前创建的/www文件夹，这里因为文件夹名称和访问路径不一致，需要用到alias这个配置：

Vue项目打包发布问题汇总

如果文件夹名称与访问路径一致都为test，那这里可以用root来配置：

Vue项目打包发布问题汇总

这里要将/test配置放到/之前，意味着在路由进入的时候，会优先匹配/test。如果根路径/下的项目有子路由/test，那http://xxxx/test只会访问到/www里的项目，而不会访问该子路由。

2. 项目配置

为了解决打包后资源路径不对的问题，需要在vue.config.js中配置publicPath，这里有两种配置方式，分别将publicPath配置为./和/test：

Vue项目打包发布问题汇总

更新nginx配置，发布后即可正常访问啦。这里的两种配置方式是有区别的，接下来会看一下它们的区别。如果不进行项目配置，直接发布访问会出现JS、CSS等资源找不到导致页面空白的问题：

Vue项目打包发布问题汇总

该问题原因是资源引用路径不对，页面审查元素可以看到，页面引用的js都是从根路径下引用的：

Vue项目打包发布问题汇总

查看打包后的文件结构，可以看到js/css/img/static等资源文件是与index.html处于同级别的：

Vue项目打包发布问题汇总

对于两种配置方式，看看都是怎么生效的：

1. publicPath配置为./， 打包后资源引用路径为相对路径：

2. publicPath配置为/test，打包后资源相对路径为从域名根目录开始的绝对路径：

两种配置都可以正确地找到JS、CSS等资源。不过还有个问题，那就是static中的静态资源依旧会找不到。

3. 绝对路径引用的静态资源找不到的问题

因为在打包过程中，public下的静态资源都不会被webpack处理，我们需要通过绝对路径来引用它们。当项目部署到非域名根路径上时，这点非常头疼，你需要在每个引用的URL前面加上process.env.BASE_URL（该值即对应上文配置的publicPath），以使得资源能被正常访问到。我们可以在main.js把这个变量值绑定到Vue.prototype，这样每个Vue组件都可以使用它：

Vue.prototype.$pb = process.env.BASE_URL

在模板中使用：

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容