vue前端项目打包部署,vue.js打包部署

　　我们使用nginx部署Vue项目，本质上就是将打包的Vue项目内容同步到nginx指向的文件夹。下面这篇文章主要介绍Vue项目打包部署的相关信息，有需要的朋友可以参考一下。

目录

　　前言一、前期工作——服务器和nginx 1的使用。准备一台服务器2。安装并启动nginx 3。了解nginx:修改nginx配置，让nginx服务器充当我们创建的文件的代理。二。Vue项目将同步的文件打包到远程服务器。1.套餐2。与远程服务器同步。3.同步ssh密钥。3.发布非域根路径。2.配置项目。3.绝对路径引用的静态资源找不到的问题。四。部署历史模式。1.配置项目。2.配置nginx。将历史模式部署到非域根路径。五.结论。

前言

　　用Vue做前端分离项目时，前端通常是单独部署的，用户访问的是前端项目地址，所以需要前端开发人员熟悉项目部署的流程和各种问题的解决方案。Vue项目本身的打包部署并不复杂，但是一些前端的同学可能接触服务器不多，在部署过程中还是会遇到一些问题。本文介绍了使用nginx服务器代理前端项目的方法以及项目部署的相关问题。内容概括如下：

一、准备工作——服务器和nginx使用

1. 准备一台服务器

　　我的系统是ubuntu，linux的操作也差不多。不会，服务器怎么会坏？

　　如果只是想体验一下，可以试试各大厂商的云服务器免费试用包，比如华为云。本文的相关操作都是在华为云上完成的。不过如果想经常练习，我觉得可以买个云服务器，比如华为云或者阿里云，都挺靠谱的。我的个人网站部署在阿里云，你可以点击我的推广链接购买。最近有些活动首次购买不到100元/年。

2. nginx安装和启动

　　轻装上阵，这部分不要过多赘述(毕竟网上有很多相关教程)。正常情况下，只需要以下两条指令：

　　# install，安装完成后用nginx -v检查，如果输出nginx的版本信息，则安装成功。

　　sudo apt-get安装nginx

　　#开始

　　sudo服务nginx启动

　　启动后，一般情况下，直接访问http://服务器ip或3358域名(本文使用的服务器没有配置域名，所以使用ip)应该可以看到nginx服务器的默认页面。就本文而言，域名和ip没有太大区别)。3354如果无法访问，可能是你的云服务器默认的http服务端口(端口80)没有对外开放。只需在服务器安全组中配置它。

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

　　检查nginx的配置。linux系统下的配置文件通常存储在/etc目录下，nginx的配置文件在/etc/nginx文件夹下。打开文件/etc/nginx/sites-available/default(nginx可以有多个配置文件，我们通常在配置nginx的时候会修改这个文件):

　　可以看到，默认情况下，nginx代理的根目录是/var/www/html。如果您输入http://服务器ip，您将访问该文件夹中的文件，您将根据index的配置值找到默认访问的文件，如index.html和index.htm。

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

　　创建文件夹/www，创建index.html，并编写字符串“Hello world”

　　mkdir /www

　　echo“Hello world”/www/index . html

　　将根值修改为/www

　　Sudo nginx -t检查nginx配置是否正确

　　加载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(ip换为你自己的服务器IP)。

　　为了方便起见，可以在package.json脚本中添加一个push命令，以yarn为例(如果使用npm，可以在push命令中将yarn改为npm run):

　　脚本:{

　　build : vue-CLI-服务版本，

　　 push : yarn build scp-r dist/* root @ 117 . 78 . 4 . 26:/www

　　},

　　这样就可以直接执行纱推或者npm跑推直接发布了。不过还有一个小问题，就是执行命令的时候需要远程服务器的root密码(这里用root连接远程服务器，也可以用其他用户，毕竟root的权限太高了)。

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

3. 同步ssh key

　　生成ssh密钥：使用git bash或powershell执行ssh-keygen来生成ssh密钥。会询问生成的密钥存储地址，直接输入就行，如果已经存在，会询问是否覆盖：

　　使用ssh-copy-id命令将ssh密钥同步到远程服务器。

　　ssh-copy-id -i ~/。root@117.78.4.26

　　输入密码后，再次同步时不需要输入密码。实际上ssh_key是同步到服务器的(这里是root用户的主目录)~/。ssh/authorized_keys文件：

　　当然也可以手动复制本地~/。ssh/id_rsa.pub(注意是pub末尾的公钥)文件追加到服务器后面~/。ssh/authorized_keys(从命名上可以看出这个文件可以存储多个ssh密钥)

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

　　创建了一个测试项目(单击此链接在gihub中查看)[1]尝试一下，打包和上传文件的命令就完成了：

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

　　至此，正常情况下发布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处于同一级别：

　　对于这两种配置方法，请查看它们是如何工作的：

　　公共路径被配置为。/，打包的资源引用路径是相对路径：

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

　　两种配置都能正确找到JS、CSS等资源。但是，还有一个问题，就是静态中的静态资源还是会丢失。

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

　　因为在打包的过程中，public下的静态资源是不会被webpack处理的，我们需要通过绝对路径来引用。当项目部署到非域根路径时，这是一个令人头疼的问题。您需要在每个引用的URL前面添加process.env.BASE_URL(该值对应于上面配置的publicPath)，以便可以正常访问资源。我们可以将这个变量值绑定到main.js中的Vue.prototype，这样每个Vue组件都可以使用它：

　　vue . prototype . $ Pb=process . env . base _ URL

　　在模板中使用：

　　img:src= ` $ { $ Pb } static/logo . png `

　　但是，比较麻烦又没有好的解决办法的问题是使用组件样式部分的public文件夹下的静态资源：

　　如果你需要使用图片作为背景图片，尽量内联使用，就像在模板中一样。

　　如果您需要导入一个样式文件，使用插值来导入它在index.html。

　　关于静态资源的问题，vue-cli的建议是尽量* *导入资源作为你的模块依赖图的一部分(也就是把它们放在资产里，使用相对路径引用)。* *避免这个问题还会带来其他好处：

四、history模式部署

　　默认情况下，Vue项目使用散列路由模式，即URL将包含一个#符号。#以下是路由地址的哈希部分。一般情况下，当浏览器地址栏的地址发生变化时，浏览器会重新加载页面，但如果修改了哈希部分，则不会。这就是前端路由的原理，允许页面根据不同的路由进行部分更新，而不需要刷新整个页面。H5增加了历史的pushState接口，也允许前端操作在不触发页面刷新的情况下更改路由地址。历史模式通过该接口实现。因此，使用历史模式可以删除路线中的#。

1. 项目配置

　　模式选项和基本选项在vue-router路由选项中配置，模式配置为‘历史’；如果部署到非域根目录，还需要将base选项配置为前面配置的publicPath的值(注意：在这种情况下，publicPath必须以绝对路径/测试的形式配置，而不是相对路径。/)

2. nginx配置

　　对于历史模式，假设项目部署到域名下的/test目录，当你访问http://xxx/test/about时，服务器会在/test指向的目录下寻找about子目录或文件。显然，因为是单页应用程序，所以目录或文件A将不存在，这将导致404错误：

　　我们需要配置nginx，以便在这种情况下，服务器可以返回单页应用程序的index.html，然后将其余的路由解析留给前端。

　　这种配置意味着，当你得到一个地址时，首先尝试根据地址找到对应的文件，如果找不到则尝试找到该地址对应的文件夹，如果找不到则返回/test/index.html。再打开刚才的about地址，刷新页面不会是404:

3. history模式部署到非域名根路径下

　　要在非域名的根目录下部署，首先必须配置publicPath。需要注意的一点前面已经提到了，就是在这种情况下，不能使用相对路径。/或空字符串来配置公共路径。为什么？

　　原因是会造成路由器链路等性能紊乱。使用测试项[2]分别用两种配置进行打包和发布，通过检查元素就可以看出区别。页面上有两个路由器链接，Home和About:

　　两种配置的打包结果如下。

　　公共路径被配置为。/或空字符串：

　　公共路径被配置为/test:

　　将publicPath配置为相对路径的router-link打包后，地址变成了相对根域名下的地址，这显然是错误的，所以非域根路径的部署应该将publicPath配置为完整的前缀路径。

五、结语

　　总结这么多关于Vue项目发布的相关问题，我几乎每一步都会经历。有问题欢迎大家一起讨论。

　　参考数据

　　[1]Vue项目打包和发布：https://github.com/Lushenggang/vue-publish-test

　　[2]Vue项目包部署测试项目地址：https://github.com/Lushenggang/vue-publish-test

　　这就是这篇关于Vue项目打包和部署的文章。有关Vue项目打包和部署的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。