1. 前期准备

购买服务器（我选的是windows server)

给服务器配置公网ip(弹性ip)

学生有300优惠券(可白嫖）

2. 远程连接服务器

win+r,输入mstsc，enter,

输入服务器的公网IP，

用户名+密码 : administrator+password

在主机和服务器之间可以通过复制粘贴传输文件

3. 安装相关软件

3.1. bandzip(压缩软件）

3.2. nodejs

3.3. tomcat

（1）安装成功之后，Tomcat\apache-tomcat-10.0.16\bin里面，找到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" />

3.4. vscode

3.5. nginx

3.6. jdk

需要给jdk配置环境变量

安装完成之后，配置系统环境变量：如下图所示

（1）JAVA_HOME：服务器存放jdk文件的路径

（2）CLASSPATH: %JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

（3）Path: %JAVA_HOME%\bin 和 %JAVA_HOME%\jre\bin

最后，cmd 输入:java -version ，看是否出现版本消息，如图说明配置成功。

软件下载链接：

server.zip

4. 相关软件的配置

4.1. 配置IIS服务

在云服务器ECS实例中打开CMD命令提示符。
输入powershell切换至PowerShell模块。
安装IIS服务及相关管理工具。

Install-WindowsFeature -name Web-Server -IncludeAllSubFeature -IncludeManagementTools

IIS安装进度变为100%后，在当前浏览器页面，新开启一个网页，在地址栏输入实例的公网IP地址，并回车。

http://<实例公网IP地址>

参考连接：https://help.aliyun.com/zh/ecs/getting-started/quick-start-for-windows-instances

4.2. nginx配置

4.2.1. 配置

nginx默认的监听端口为80，如被占用可修改：” **nginx\conf\nginx.conf** “ 文件

4.2.2. 启动

双击解压后根目录下的nginx.exe或命令行启动均可。启动后，在浏览器输入 ” [http://localhost:80](http://localhost/) " 进行测试

4.2.3. 关闭

由于未设置环境变量，关闭时需要利用命令行进入nginx所在路径，执行 “ **nginx -s stop** ”。除了nginx外，还有其他的web服务器，不过nginx内存占用少，启动快，并发能力强，并且安装简单，因此采用nginx。重启：“ **nginx -s reload** ”

5. 项目打包

在vite.config.js中加入这个

图片的路径要特别注意

然后好像就没有问题了

npm run build

6. 部署到服务器

这里的端口记得要在阿里云平台的ECS的控制台给服务器配置安全组，即放行端口，不然是无法访问到我们的网页的

6.1. 使用tomcat

把生成的dist文件移动到tomcat的webapps下，运行startup.bat

即可http://<公网ip>:port/<项目名> 访问

6.2. 使用nginx

将build生成的dist目录复制到nginx下的html目录中。修改nginx配置文件

重启nginx，浏览器访问 “ [http://localhost:8080/](http://localhost:8080/) ”，即可。如果页面空白，没有任何内容，使用F12查看报错信息

如果错误如上图所示，恭喜你，很好解决，这是因为打包找寻路径错误，导致dist中的index.html中的css与js加载失败。回到vue项目中，打开 **vue.config.js** 文件

module.exports = {
  publicPath: '/myName'
};

如果你的配置做了修改，没有使用默认配置（如上），则表明资源加载路径为 ' **/myName** '，此时有两个方法：

将**publicPath**恢复成默认状态：`publicPath: './'`（不建议）；
重新配置nginx。

这里建议使用第二种方法，因为nginx可能会部署多个项目，针对不同项目增加配置是一种很正常的操作。打开**nginx.conf**文件

server {
        listen       8080; # 监听的端口号，默认是8080
        server_name  localhost; # 默认地址，仅需要在本地做验证，可以不修改

		# 这里可以放nginx启动页
        location / {
            root   html/dist; # 项目所在路径
            index  index.html index.htm; # 默认访问主页
            try_files  $uri $uri/ index.html=404; # 解决vue项目刷新404的问题
        }

		# 这里放新增加的项目，我这里叫myName，因此localtion后接/myName
        location /myName {
            alias  html/myName; # 项目所在路径
            index  index.html index.htm; # 默认访问主页
            try_files  $uri $uri/ /myName/index.html; # 解决vue项目刷新404的问题
        }
}