用Vue做前端分离项目时，前端通常是单独部署的，用户访问的是前端项目地址，所以需要前端开发人员熟悉项目部署的流程和各种问题的解决方案。
1.准备一台服务器。
我的系统是ubuntu，linux的操作也差不多。不会，服务器怎么会坏？
如果只是想体验一下，可以试试各大厂商的云服务器免费试用包，比如华为云。本文的相关操作都是在华为云上完成的。不过如果想经常练习，我觉得可以买个云服务器，比如华为云或者阿里云，都挺靠谱的。2.nginx安装和启动轻装出行，这部分就不细说了。正常情况下，只需要以下两条指令:
启动后，一般情况下，直接访问http:// server ip或者http:// domain name应该可以看到nginx服务器的默认页面——如果访问不到，可能是你的云服务器默认的http服务端口没有对外开放，在服务器安全组配置就可以了。3.了解nginx:修改nginx配置，让nginx服务器充当我们创建的文件的代理。检查nginx的配置。linux系统下的配置文件通常存储在/etc目录下，nginx的配置文件在/etc/nginx文件夹下。打开文件/etc/nginx/sites-available/default:
可以看到，默认情况下，nginx代理的根目录是/var/www/html。输入http:// server ip将访问该文件夹中的文件，根据index的配置值找到默认访问的文件，如index.html和index.htm。
我们可以更改root的值来修改nginx服务代理的文件夹:
1)、创建一个文件夹/www，并创建一个index.html，写出“Hello world”字符串。
mkdir/wwwe CHO ' Hello world ' >/www/index . html
2)将根值更改为/www。
3) sudo nginx -t检查nginx配置是否正确。
4)加载nginx配置:sudo nginx -s reload再次访问页面，发现页面内容变成了我们创建的index.html:第二，Vue项目将同步文件打包到远程服务器。1.包装
默认情况下，对于使用vue-cli创建的项目，package.json中的脚本应该已经配置了build指令。直接执行纱线构建或npm运行构建即可。
2.同步到远程服务器我们使用nginx部署Vue项目，本质上就是将Vue项目的打包内容同步到nginx指向的文件夹。前面的步骤已经介绍了如何配置nginx来指向我们创建的文件夹。剩下的问题是如何将打包的文件同步到服务器上的指定文件夹，比如前面步骤中创建的/www。
您可以在git-bash或powershell中使用scp指令来同步文件，或者使用rsync指令(如果它是在linux环境中开发的话):scp-r dist/* root @ 117 . 78 . 4 . 26:/www或rsync-AVR-delete-after dist/* root @ 117 . 78 . 4 . 26:/www注意这里和下一步是root使用用户远程同步，root和ip要根据你的具体情况更换。
为了方便，可以在package.json脚本中添加一个push命令，以yarn为例:然后可以直接执行yarn push或者npm run push直接发布。不过有个小问题，就是在执行命令的时候，需要远程服务器的root密码。为了避免每次都输入root密码，我们可以将本地机器的ssh同步到远程服务器的authorized_keys文件。3.同步ssh密钥生成ssh密钥:使用git bash或powershell执行ssh-keygen来生成ssh密钥。会询问生成的密钥存储地址，直接输入就行，如果已经存在，会询问是否覆盖:
使用ssh-copy-id命令将ssh密钥同步到远程服务器。
输入密码后，再次同步时不需要输入密码。其实ssh_key是同步到服务器的~/。ssh/authorized_keys文件:
当然也可以手动复制本地~/。ssh/id_rsa.pub文件，并将其附加到服务器的后面~/。ssh/authorized _ key。注意:这里一直使用root用户，所以不存在文件操作权限问题。如果您的文件夹创建者不是远程登录用户，则可能存在文件同步失败的问题。此时，远程服务器需要修改文件夹的读写权限。我创建了一个测试项目来测试它，并且完成了一个打包和上传文件的命令:访问，果然，我们看到了我们熟悉的界面:至此，正常情况下发布Vue项目的引入就完成了。接下来介绍非域根路径的发布方法和历史路由方式。
三。非域根路径发布
有时，同一个服务器和同一个端口可能会根据目录分成几个不同的项目。例如，我们希望项目部署在http://a.com/test,下，这样当我们访问http://a.com/test,时，我们将访问项目的主页，但是除了测试前缀之外的地址将访问其他项目。这时需要修改nginx配置和Vue封装配置。
1.nginx配置
只需添加位置规则，分配访问路径并指定访问文件夹。我们可以指向/test之前创建的/www文件夹。这里，因为文件夹名称和访问路径不一致，所以我们需要使用别名配置:
如果文件夹名称和访问路径都是test，您可以在这里用root进行配置:
将/test配置放在/这里意味着当路由进来时/test将首先被匹配。如果根路径/下的项有子路由/test，那么http://xxxx/test将只访问/www中的项，而不访问子路由。
2.项目配置要解决打包后资源路径不正确的问题，需要在vue.config.js中配置publicPath有两种方式配置，分别是将publicPath配置为。/and /test:
更新nginx配置，发布后可以正常访问。这里的两种配置是有区别的。接下来，我们来看看他们的区别。如果不配置项目，会出现找不到JS、CSS等资源直接发布访问，导致页面空变白的问题:出现这个问题的原因是资源引用路径错误。正如page review元素所看到的，页面引用的js都是从根路径引用的:查看打包后的文件结构，可以看到js/css/img/static等资源文件是与index.html处于同级别的：查看打包的文件结构，可以看到js/css/img/static等资源文件与index.html处于同一级别:
对于这两种配置方法，请查看它们是如何工作的:公共路径被配置为。/，打包的资源引用路径是相对路径:publicPath配置为/test，打包资源的相对路径是从域名根开始的绝对路径:
两种配置都能正确找到JS、CSS等资源。但是，还有一个问题，就是静态中的静态资源还是会丢失。3.绝对路径引用的静态资源找不到的问题。因为在打包的过程中，public下的静态资源是不会被webpack处理的，我们需要通过绝对路径来引用。当项目部署到非域根路径时，这是一个令人头疼的问题。您需要在每个引用的URL前面添加process.env.base_URL，以便可以正常访问资源。我们可以将这个变量值绑定到main.js中的Vue.prototype，这样每个Vue组件都可以使用它:
vue . prototype . $ Pb = process . env . base _ URL在模板中使用:
但是，比较麻烦又没有好的解决办法的问题是使用组件样式部分的public文件夹下的静态资源:
如果你需要使用图片作为背景图片，尽量内联使用，就像在模板中一样。如果您需要导入一个样式文件，使用插值来导入它在index.html。
关于静态资源的问题，vue-cli的建议是尽可能将资源作为你的模块依赖图的一部分导入，这样可以避免这个问题，还能带来其他好处:四。历史模式部署默认情况下，Vue项目使用散列路由模式，即URL将包含一个#符号。#以下是路由地址的哈希部分。
一般情况下，当浏览器地址栏的地址发生变化时，浏览器会重新加载页面，但如果修改了哈希部分，则不会。这就是前端路由的原理，允许页面根据不同的路由进行部分更新，而不需要刷新整个页面。H5增加了历史的pushState接口，也允许前端操作在不触发页面刷新的情况下更改路由地址。历史模式通过该接口实现。因此，使用历史模式可以删除路线中的#。1.项目配置模式选项和基本选项在vue-router路由选项中配置，模式配置为‘历史’；如果部署到非域根目录，还需要将base选项配置为之前配置的publicPath的值。
2.nginx配置
对于历史模式，假设项目被部署到域名下的/test目录中。当你访问http://xxx/test/about时，服务器会在/test指向的目录下寻找about子目录或文件。显然，因为它是单页应用程序，所以不会有目录或文件A，这将导致404错误:
我们需要配置nginx，以便在这种情况下，服务器可以返回单页应用程序的index.html，然后将其余的路由解析留给前端。这种配置意味着，当你得到一个地址时，首先尝试根据地址找到对应的文件，如果找不到则尝试找到该地址对应的文件夹，如果找不到则返回/test/index.html。再打开刚才的about地址，刷新页面不会是404:3.历史模式部署到非域名的根路径。要在非域名的根目录下部署，首先必须配置publicPath。需要注意的一点前面已经提到了，就是在这种情况下，不能使用相对路径。/or 空字符串来配置publicPath。
为什么？原因是它会导致路由器链路的紊乱等。使用测试项来分别打包和发布两个配置，您可以通过检查元素来看到不同之处。页面上有两个路由器链接，Home和about:两种配置的打包结果如下。公共路径被配置为。/or 空字符串:
公共路径被配置为/test:
将publicPath配置为相对路径的router-link打包后，地址变成了相对根域名下的地址，这显然是错误的，所以非域根路径的部署应该将publicPath配置为完整的前缀路径。
动词 （verb的缩写）结论。
总结这么多关于Vue项目发布的相关问题，我几乎每一步都会经历。有问题欢迎大家一起讨论。
