Vue 3.0 && Nginx 项目打包部署知识都在这了~

Vue 3.0 && Nginx 项目打包部署知识都在这了~

Vue 项目打包部署知识都在这了！

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

​​**1. 准备一台服务器**​​​​**2. nginx安装和启动**​​​​**3、 了解nginx: 修改nginx配置，让nginx服务器代理我们创建的文件**​​

​​**二、Vue项目打包同步文件到远程服务器**​​

​​**1、 打包**​​​​**2、 同步到远程服务器**​​​​**3、 同步ssh key**​​

​​**三、非域名根路径发布**​​

​​**1、 nginx配置**​​​​**2、项目配置**​​​​**3、绝对路径引用的静态资源找不到的问题**​​

​​**四、history模式部署**​​

​​**1、项目配置**​​​​**2、 nginx配置**​​​​**3、history模式部署到非域名根路径下**​​

​​**五、结语**​​

使用Vue做前后端分离项目时，通常前端是单独部署，用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。

Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题，内容概览：

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

1. 准备一台服务器

我的是ubuntu系统，linux系统的操作都差不多。没有服务器怎么破？

如果你只是想体验一下，可以尝试各大厂的云服务器免费试用套餐，比如华为云免费试用，本文相关操作即是在华为云上完成的。

不过如果想时常练练手，我觉得可以购买一台云服务器，比如上面的华为云或者阿里云都还挺可靠。

2. nginx安装和启动

轻装简行，这部分不作过多赘述（毕竟网上相关教程一大堆），正常情况下仅需下面两个指令：

# 安装，安装完成后使用nginx -v检查，如果输出nginx的版本信息表明安装成功sudo apt-get install nginx# 启动sudo service nginx start

启动后，正常情况下，直接访问 或 （本文测试用的服务器没有配置域名，所以用ip，就本文而言，域名和ip没有太大区别）应该就能看到nginx服务器的默认页面了——如果访问不到，有可能是你的云服务器默认的了解nginx: 修改nginx配置，让nginx服务器代理我们创建的文件

查看nginx的配置，linux系统下的配置文件通常会存放在/etc目录下，nginx的配置文件就在/etc/nginx文件夹，打开文件/etc/nginx/sites-available/default（nginx可以有多个配置文件，通常我们配置nginx也是修改这个文件）：

可以看到默认情况下，nginx代理的根目录是/var/world"字符串

mkdir /'Hello world' > //nginx -t 检查nginx配置是否正确

4）、加载nginx配置：sudo nginx -s reload

再次访问页面，发现页面内容已经变成了我们创建的index.html:

二、Vue项目打包同步文件到远程服务器

1、 打包

默认情况下，使用vue-cli创建的项目，package.json里的script应该已经配置了build指令，直接执行yarn build 或者 npm run build即可。

2、 同步到远程服务器

我们使用nginx部署Vue项目，实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹。之前的步骤已经介绍了怎样配置nginx指向我们创建的文件夹，剩下的问题就是怎么把打包好的文件同步到服务器上指定的文件夹里，比如同步到之前步骤中创建的/-r dist/* root@117.78.4.26:/-avr --delete-after dist/* root@117.78.4.26:/run即可）：

"scripts": { "build": "vue-cli-service build", "push": "yarn build && scp -r dist/* root@117.78.4.26:/ },

这样就可以直接执行yarn push 或者npm run push直接发布了。不过还有一个小问题，就是命令执行的时候要求输入远程服务器的root密码（这里使用root来连接远程的，你可以用别的用户，毕竟root用户权限太高了）。

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

3、 同步ssh key

ssh-copy-id -i ~/.ssh/id_rsa.pub root@117.78.4.26

输入密码后，之后再次同步就不需要输入密码了。其实ssh_key是同步到了服务器（此处是root用户家目录）~/.ssh/authorized_keys文件里：

当然你也可以手动复制本地/.ssh/id_rsa.pub（注意是pub结尾的公钥）文件内容追加到服务器/.ssh/authorized_keys的后面（从命名可以看出该文件可以存储多个ssh key）

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

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

至此，常规情况下发布Vue项目就介绍完了，接下来介绍非域名根路径下发布以及history路由模式发布方法。

三、非域名根路径发布

有时候同一台服务器同一端口下可能会根据目录划分出多个不同的项目，比如我们希望项目部署到nginx配置

只需要添加一条location规则，分配访问路径和指定访问文件夹。我们可以把/test指向之前创建的/= process.env.BASE_URL

在模板中使用：

然而，更加头疼并且没有良好解决方案的问题是在组件style部分使用public文件夹下的静态资源：

如果需要使用图片等作为背景图片等，尽量使用内联方式使用吧，像在模板中使用一样。如果需要引入样式文件，则在index.html中使用插值方式引入吧。

关于静态资源的问题，vue-cli的推荐是尽量将资源作为你的模块依赖图的一部分导入（即放到assets中，使用相对路径引用），避免该问题的同时也带来其它好处：

四、history模式部署

默认情况下，Vue项目使用的是hash路由模式，就是URL中会包含一个#号的这种形式。#号以及之后的内容是路由地址的hash部分。

正常情况下，当浏览器地址栏地址改变，浏览器会重新加载页面，而如果是hash部分修改的话，则不会，这就是前端路由的原理，允许根据不同的路由页面局部更新而不刷新整个页面。

H5新增了history的pushState接口，也允许前端操作改变路由地址但是不触发页面刷新，history模式即利用这一接口来实现。因此使用history模式可以去掉路由中的#号。

1、项目配置

在vue-router路由选项中配置mode选项和base选项，mode配置为’history’；如果部署到非域名根目录，还需要配置base选项为前文配置的publicPath值（注意：此情况下，publicPath必须使用绝对路径/test的配置形式，而不能用相对路径./）

2、 nginx配置

对于history模式，假设项目部署到域名下的/test目录，访问原因是它会导致router-link等的表现错乱，使用测试项目分别使用两种配置打包发布，审查元素就能看出区别。在页面上有两个router-link，Home和About：

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

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

五、结语

关于Vue项目发布的相关问题就先总结这么多，几乎在每一步都踩过坑才有所体会，有问题欢迎各位同学一起探讨。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。