超详细Vue项目部署篇！！！

小白的部署之路

前段时间白嫖了一年的阿里云服务器，想着手上有个项目，那就部署上去吧。找了很多教程，没有一篇是完整细致的，对于小白的我来说太难了，然后就进行了一天的踩坑之路。最后一人血书写了此文记录，有写的不对的地方希望大佬们能加以指正。希望我的笔记对大家有所帮助！

将大象放进冰箱有几个步骤？打开冰箱，将大象放进去，关上冰箱。巧了，我觉得项目部署呢，刚刚好也是三步：打包项目–>搭建服务器环境–>将项目放到环境中。让我们开始吧！！！

一、打包Vue项目

1、先将项目打包，生成dist文件夹，但是打包之前还要进行一些配置，不然打包之后index.html打开会是空白的，并且报错，因为没有拿到资源。 网上教程有说修改config/index.js，可是我的是Vue-cli4，根本没有这个文件夹了啊，所以对于cli3/cli4的，咱们就得自己在项目文件下创建vue.config.js文件夹，然后加入以下代码：

module.exports = {
          
   
  publicPath: "./",
  assetsDir: "static",
  outputDir: dist,
}

2、之后，我们还要在router文件夹下的index.js里面加一个base路径，如果你设置的路由为history模式，可以改为hash或者注释掉。

const router = new VueRouter({
          
   
  mode: hash,
  base: process.env.BASE_URL,
  routes
})

3、终端运行 npm run build，生成dist文件夹，dist文件夹中包含static和index.html。 我们待会要将dist文件夹复制到Tomcat中webapps的文件夹下。 至此，项目打包完成。

二、购买阿里云服务器以及相关配置

1、购买服务器。我买的是Windows Server 2019。 2、登录账号，打开控制台 进入控制台后，可以看到自己购买的服务器了。

3、点击左边列表的网络与安全里面的安全组，点击配置规则（这一步很重要） 以下是我的配置规则： 4、点击实例，接下来我们设置两个密码，一个是服务器开机的登录密码，一个是远程连接（VNC）的密码。（下面将会用到这俩密码） 5、重置密码之后，点击远程连接，我选择的是VNC远程连接，点击登录。

6、这时候有个弹窗，需要输入刚刚配置的VNC密码（左上角点击发送远程命令，点击连接VNC也有弹窗）

输入VNC密码之后进入开机状态，出现下图页面（如果没有出现这个密码窗口，点击左上角“发送远程命令–>CTRL+ALT+DELETE”），输入刚刚配置的开机登录密码。

三、搭建阿里云服务器环境

1、进入桌面了，桌面很干净，只有一个回收站，这时候我们需要搭环境了，需要搭建两个环境 ①jdk ②Tomcat ，然后把本地下载好了的环境移动到云服务器上。

2、安装jdk

安装JDK 选择安装目录 安装过程中会出现两次安装提示 。第一次是安装 jdk ，第二次是安装 jre 。建议两个都安装在同一个java文件夹中的不同文件夹中。 安装完成之后，配置系统环境变量：如下图所示 （1）JAVA_HOME：服务器存放jdk文件的路径 （2）CLASSPATH: %JAVA_HOME%libdt.jar;%JAVA_HOME%lib ools.jar （3）Path: %JAVA_HOME%in 和 %JAVA_HOME%jrein 最后，cmd 输入:java -verison ，看是否出现版本消息，如图说明配置成功。

3、安装TomCat

（1）安装成功之后，Tomcatapache-tomcat-10.0.16in里面，找到startup.bat文件，双击运行。

（2）在浏览器输入localhost:8080 出现如下页面说明Tomcat部署成功。 （3）最后一步，修改端口，8080是tomcat默认的端口，而80是常用的默认端口。如果端口设置为80的话，输入完ip后不需要接80。因为80已经设置为默认的端口了。 打开Tomcat所在的目录，打开conf文件夹，打开server.xml文件，如图，将port改为80：

<Connector port="80" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />

至此，TomCat配置完成。

四、将项目放到环境中