Vue项目打包部署总结

<div id="js_content">
<p style="text-align: center">关注程序员成长指北，回复“1”<br></p>
<p style="text-align: center">加入我们一起学习，天天进步</p>
<p>来源 | https://wintc.top/article/29</p>
<p style="text-align: left">使用Vue做前后端分离项目时，通常前端是单独部署，用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。</p>
<p style="text-align: left">Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题，内容概览：</p>
<p><img height="242" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-928c4622ea400fb8dfaf3ef067f82cd7" width="568"></p>
<h2><strong>一、准备工作——服务器和nginx使用</strong></h2>
<h4><strong>1. 准备一台服务器</strong></h4>
<p style="text-align: left">我的是ubuntu系统，linux系统的操作都差不多。没有服务器怎么破？</p>
<p style="text-align: left">如果你只是想体验一下，可以尝试各大厂的云服务器免费试用套餐，比如华为云免费试用，本文相关操作即是在华为云上完成的。</p>
<p style="text-align: left">不过如果想时常练练手，我觉得可以购买一台云服务器，比如上面的华为云或者阿里云都还挺可靠。</p>
<h4><strong>2. nginx安装和启动</strong></h4>
<p style="text-align: left">轻装简行，这部分不作过多赘述（毕竟网上相关教程一大堆），正常情况下仅需下面两个指令：</p>
<pre class="blockcode"><code class="language-properties"># 安装，安装完成后使用nginx -v检查，如果输出nginx的版本信息表明安装成功
sudo apt-get install nginx
# 启动
sudo service nginx start
</code></pre>
<p style="text-align: left">启动后，正常情况下，直接访问 http://服务器ip 或 http://域名（本文测试用的服务器没有配置域名，所以用ip，就本文而言，域名和ip没有太大区别）应该就能看到nginx服务器的默认页面了——如果访问不到，有可能是你的云服务器默认的http服务端口（80端口）没有对外开放，在服务器安全组配置一下即可。</p>
<p><img height="279" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-bcef6cc4257fd5fa497d9c2cd7b1ccab" width="512"></p>
<h4><strong>3、了解nginx: 修改nginx配置，让nginx服务器代理我们创建的文件</strong></h4>
<p style="text-align: left">查看nginx的配置，linux系统下的配置文件通常会存放在/etc目录下，nginx的配置文件就在/etc/nginx文件夹，打开文件/etc/nginx/sites-available/default（nginx可以有多个配置文件，通常我们配置nginx也是修改这个文件）：</p>
<p><img height="341" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-98b0702c0d893d33d70b975745c04d4f" width="669"></p>
<p style="text-align: left">可以看到默认情况下，nginx代理的根目录是/var/www/html，输入 http://服务器ip会访问这个文件夹下的文件，会根据index的配置值来找默认访问的文件，比如index.html、index.htm之类。</p>
<p style="text-align: left">我们可以更改root的值来修改nginx服务代理的文件夹：</p>
<p style="text-align: left"><strong>1）、创建文件夹/www，并创建index.html，写入"Hello world"字符串</strong></p>
<pre class="blockcode"><code class="language-javascript">mkdir /www
echo 'Hello world' > /www/index.html
</code></pre>
<p><strong>2）、修改root值为 /www</strong><br><img height="288" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-ec913202c9d6f1159e84a1234788dc45" width="651"></p>
<p style="text-align: left"><strong>3）、sudo nginx -t 检查nginx配置是否正确</strong></p>
<p style="text-align: left"><img height="113" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-e185aebffca217f43ac1cd218bb39c8b" width="905"></p>
<p style="text-align: left"><strong>4）、加载nginx配置：sudo nginx -s reload</strong></p>
<p style="text-align: left">再次访问页面，发现页面内容已经变成了我们创建的index.html:</p>
<p><img height="89" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-0a06e670436a0971746a64eeaa10f30f" width="362"></p>
<h2><strong>二、Vue项目打包同步文件到远程服务器</strong></h2>
<h4><strong>1、打包</strong></h4>
<p style="text-align: left">默认情况下，使用vue-cli创建的项目，package.json里的script应该已经配置了build指令，直接执行yarn build 或者 npm run build即可。</p>
<h4><strong>2、同步到远程服务器</strong></h4>
<p style="text-align: left">我们使用nginx部署Vue项目，实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹。之前的步骤已经介绍了怎样配置ngi