本文发表于本人个人网站：http://wintc.top/article/29，转载请注明出处。在使用Vue前后端分离项目时，一般是前端单独部署，用户访问前端项目地址。因此前端开发人员有必要熟悉项目部署的流程和各种问题的解决方法。Vue项目本身的打包部署并不复杂，但是可能有些前端同学接触服务器的不多，在部署过程中还是会遇到各种各样的问题。本文介绍使用nginx服务器代理前端项目的方法及项目部署的相关问题。内容概述：一、准备工作——服务器和nginx的使用1、准备一台服务器。我用的是ubuntu系统，linux系统的操作类似。没有服务器怎么破解？如果只是想体验一下，可以试试各大厂商云服务器的免费试用包，比如华为云的免费试用。本文相关操作均在华为云上完成。但是如果想时不时练练手，我觉得可以买个云服务器，比如上面的华为云或者阿里云，还是比较靠谱的。我的个人网站部署在阿里云上。您可以点击我的促销链接购买。最近有首购不到100元/年的活动。2、nginx的安装和启动简单易行。我不会详细介绍这部分。毕竟网上有很多相关的教程。#安装，安装完成后使用nginx-v查看，如果输出nginx版本信息说明安装成功sudoapt-getinstallnginx#startsudoservicenginxstart启动后，正常情况下直接访问http://服务器ip或者http://域名（本文使用的服务器没有配置域名，所以使用ip，就本文而言，域名和ip相差不大）你应该能看到nginx服务器的默认页面——如果不能访问，有可能是你的云服务器默认的http服务端口（80端口）没有对外开放，配置一下即可在服务器安全组中。3、了解nginx：修改nginx配置，让nginx服务器代理我们创建的文件，查看nginx配置。Linux系统下的配置文件通常存放在/etc目录下，nginx的配置文件在/etc/nginx文件夹下。打开文件/etc/nginx/sites-available/default（nginx可以有多个配置文件，一般我们配置nginx都是修改这个文件）：可以看到默认nginx代理的根目录是/var/www/html，输入http://serverip访问该文件夹下的文件，根据index的配置值找到默认访问的文件，如index.html、index.htm等。我们可以通过改变root的值来修改nginx服务代理的文件夹：创建文件夹/www，并创建index.html，写入"Helloworld"stringmkdir/wwwecho'Helloworld'>/www/index.html修改root值改为/wwwsudonginx-t检查nginx配置是否正确加载nginx配置：sudonginx-sreload再次访问页面，发现页面内容变成了我们创建的index.html：2.vue项目打包及同步文件到远程服务器1.打包默认情况下，对于使用vue-cli创建的项目，package.json中的脚本应该已经配置了build指令，直接执行yarnbuild或npmrunbuild即可。2、同步到远程服务器我们使用nginx部署Vue项目，本质上是将Vue项目打包后的内容同步到nginx指向的文件夹中。前面的步骤已经介绍了如何配置nginx指向我们创建的文件夹。剩下的问题就是如何将打包后的文件同步到服务器上的指定文件夹，比如同步到前面步骤创建的/www。要同步文件，可以在git-bash或powershell中使用scp命令。如果是在linux环境下开发，也可以使用rsync命令：scp-rdist/*root@117.78.4.26:/www或者rsync-avr--delete-afterdist/*root@117.78.4.26:/www注意这里和后面的步骤是root用的是用户远程同步，root和ip要根据你的具体情况替换（ip替换成你自己的服务器IP）。为了方便，可以在package.json脚本中添加push命令，以yarn为例（如果使用npm，只需将push命令中的yarn改为npmrun即可）："scripts":{"build":"vue-cli-servicebuild","push":"yarnbuild&&scp-rdist/*root@117.78.4.26:/www"}，这样可以直接执行yarnpush或者npmrunpush直接发布。不过还有一个小问题，就是执行命令的时候需要输入远程服务器的root密码（这里使用root连接远程，其他用户也可以，毕竟root用户权限太高）。为了避免每次执行都要输入root密码，我们可以将本机的ssh同步到远程服务器的authorized_keys文件中。3、同步sshkey生成sshkey：使用gitbash或powershell执行ssh-keygen生成sshkey。它会询问生成密钥的存储地址，只需按Enter。如果已经存在，会询问是否覆盖：同步sshkey到远程服务器，使用ssh-copy-id命令同步ssh-copy-id-i~/.ssh/id_rsa.pubroot@117.78。4.26输入密码后，以后无需再次输入密码。其实ssh_key是同步到服务器（这里是root用户的家目录）的~/.ssh/authorized_keys文件中：当然你也可以手动复制本地~/.ssh/id_rsa.pub的内容（notethepublickeyattheendofpub)appendtotheserver~/.ssh/authorized_keys（从命名可以看出这个文件可以存放多个sshkeys）注：全程使用root用户，所以有文件操作权限没问题。如果你的文件夹创建用户不是远程登录用户，可能会出现文件同步失败的问题。在这种情况下，远程服务器需要修改文件夹的读写权限（命令chmod）。创建了一个测试项目（在github上点击此链接查看）试用，打包，上传文件，一条命令：访问，看到我们熟悉的界面：至此，Vue的介绍项目是正常情况下发布的，接下来介绍非域名根路径下的发布方式和历史路由方式的发布方式。3、非域名根路径发布有时候同一个服务器同一个端口可能会根据目录划分出多个不同的项目。比如我们希望项目部署在http://a.com/test下，那么访问http://a.com/testa.com/test访问的是项目的首页，而除测试前缀将访问其他项目。此时需要修改nginx配置和vue打包配置。1、nginx配置只需要添加location规则，分配访问路径，指定访问文件夹即可。我们可以将/test指向之前创建的/www文件夹。因为文件夹名和访问路径不一致，所以我们需要使用别名配置：如果文件夹名和访问路径都是test，那么这里可以使用root来配置。：这里的/test配置要放在/之前，也就是说路由进入的时候会优先匹配/test。如果根路径/下的项目有子路由/test，那么http://xxxx/test只会访问/www下的项目，不会访问子路由。2.项目配置为了解决打包后资源路径错误的问题，需要在vue.config.js中配置publicPath。这里有两种配置方式，分别配置publicPath为./和/test：更新nginx配置，马上释放，可以正常访问。这里的两种配置方式是有区别的，接下来我们看一下它们的区别。如果不配置项目，直接发布访问会出现找不到js、css等资源，页面空白的问题：出现这个问题的原因是资源引用路径错误，你可以看到页面审核元素，页面引用的js是从根路径引用的：查看打包后的文件结构，可以看到js/css/img/static等资源文件和index处于同一层级.html:两种配置方式，看看它们是如何工作的：publicPath配置是./，打包资源引用路径是相对路径：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在模板中使用：
