大家好，我是讯享网，很高兴认识大家。



1.1 部署Vue项目

1. 打包项目

在命令行终端，输入命令，打包项目：

2. 将生成的dist文件夹下的所有内容复制到tomcat的webapps下

3. 启动tomcat，并输入访问地址

yygh-admin为项目名

如果输入url后，页面一片空白，可能是因为js、css文件找不到，可能是打包路径问题：

• vue-cli3以上：
  将vue.config.js文件中的module.exports下的修改为：

• vue-cli3一下版本：
  将vue项目中的config文件夹下的index.js的修改为(改为自己tomcat下webapps的文件夹名即可)

有关tomcat的tips：

①修改tomcat地址栏上的图标

②tomat中文乱码

• 如果是tomcat控制台乱码

（一般tomcat出现乱码都是字符集的问题）
在tomcat目录下conf中找到logging.properties文件
大概在47行处把java.util.logging.ConsoleHandler.encoding = UTF-8改为java.util.logging.ConsoleHandler.encoding = GBK 重启tomcat及可

• tomcat访问页面时乱码

1. 在tomcat目录的bin文件下找到catalina.bat修改216行左右
   set”JAVA_OPTS=%JAVA_OPTS% %JSSE_OPTS%” 修改为set”JAVA_OPTS=%JAVA_OPTS% %JSSE_OPTS%” -Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8
2. 在tomcat的server.xml配置
   添加：URIEncoding=”UTF-8”

3. 在项目的idex.html(项目首页)
   添加：content=“text/html”; charset=“utf-8”
   (head - meta - title)

4. 在tomcat的web.xml,大概119行处添加:

添加完之后效果：

5. 重启tomcat，查看效果

③tomcat配置https服务

1. 下载证书（可以去腾讯云申请一个一年的免费证书）

• 登录SSL证书管理控制台
• 弹出的窗口中，选择申请免费证书
• 证书类型选择
• 绑定自己的域名，其他的默认推荐，提交申请

审核很快的，我的证书几分钟就通过了

2. 下载证书

• 进入自己的SSL证书管理平台
• 下载证书
• 根据加密类型不同，下载下来的文件类型也不同，我的有两个文件

3. 配置tomcat的https服务
   ①上传证书（）到自己tomcat的conf目录下
   
   ②修改server.xml文件

示例：

• 修改web.xml:

在结束标签 </welcome-file-list> 后面换行，添加以下内容

• 修改server.xml，修改80的connector

此修改操作可将非 SSL 的 connector 跳转到 SSL 的 connector 中。

讯享网

参考：

1.2 部署Nuxt项目

有待补充

2.1 部署流程

①安装nginx

如有不熟悉的朋友，参考下面这篇教程，有详细步骤。

Linux安装软件合集

②npm run build打包vue项目

找到vue项目根目录，执行打包命令

③上传到nginx的html文件夹

④修改nginx.conf配置文件

进入nginx的conf目录：

通过vim修改nginx.conf

具体配置如下（以配置music-manage项目为例，这个项目我给它放到了ip为192.168.145.13这台虚拟机上）：

如果要配置，多个项目，配置多个server即可。

⑤重启nginx，在浏览器输入ip+端口+项目名即可访问

需要开放对应访问端口或关闭防火墙

上述步骤如果有遇到什么问题的可以看下面模块

2.2 部署过程中常见问题

①vue的build打包问题

情况一：

• 方式一：

找到文件，在代码前面添加：

• 方式二：

可切换node至v10.版本

• 方式三：

升级shelljs到 v0.8.4 即可解决

情况二：

• 方式一：

• 方式二：

• 方式三

②nginx启动问题

bug：如果启动Nginx如下错误

表明是端口被占用了，解决办法：

• 杀死占用端口的进程

UID ：程序被该 UID 所拥有

PID ：就是这个程序的 ID

PPID ：则是其上级父程序的ID

C ：CPU使用的资源百分比

STIME ：系统启动时间

TTY ：登入者的终端机位置

TIME ：使用掉的CPU时间。

• 停止nginx，重新启动

③vue的css不显示、中文乱码及图片路径问题

• css不显示

这是因为前端文件在被浏览器进行渲染的时候，被当做普通文本内容来进行渲染了，并不是按照js、css来进行渲染

修改nginx.conf文件，在nginx的http模块下添加配置即可

• 中文乱码问题

这其实就是一个编码问题，我们也只需要修改nginx.conf即可

在server模块下添加上charset utf-8;

• 我的nginx.conf配置，大家可以参考

• 图片路径问题

我在Login.vue中写了一个样式，通过相对路径指向图片位置，但是发现build之后访问路径有问题，因此导致我后台的背景图片无法显示

解决办法：在build/utils.js文件中添加如下一行代码即可

④vue出现Uncaught SyntaxError: Unexpected token ＜

开发 测试 启动 npm run dev 能正常访问

打包 npm run build 部署到nginx上后访问页面出现空白，浏览器F12 查看报错

⑤端口未开放，防火墙未关，云服务器安全组未开放对应端口

查看防火墙状态

关闭防火墙

启动防火墙

直接关闭防火墙当然可以给我们省下很多事情，我们不用一个一个的去开放对应的端口，但是也会有被黑客攻击的危险。因此如果是部署在公网上的项目还是建议通过开放指定端口来实现访问项目的目的。

开放指定端口

①- -zone 作用域
②- -add-port=8081/tcp 添加端口，格式：端口/通讯协议
③- -permanent 永久生效，没有此参数，重启之后失效

查看已经开放的端口

查看指定端口的使用情况

：