Vue项目打包部署总结，前端校招面试经验汇总

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

mkdir /www

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

1. 修改root值为 /www
2. sudo nginx -t 检查nginx配置是否正确
3. 加载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存放地址，直接回车就行，如果已经存在，则会询问是否覆盖：