当前位置：首页 > news >正文

服务器上部署前端页面-实现IP+端口/index.html在线访问你的网页

news 来源：原创 2025/6/3 10:08:43

首先一点，不管是那个框架开发的网页前端，最后都需要Build,构建完毕以后都是原始的HTML + CSS + JS 三样文件！

所以不管用原始的三剑客（HTML + CSS + JS）开发的前端还是用各类框架开发的前端界面（只是让开发简单了点，其他都差不多）部署在服务器上步骤类似！

1.准备前端的目录文件 2.服务器上下载个Tomcat 确保能运行 3.把前端文件放在Tomcat下的webApp文件夹即可

（一）简单的HTML/CSS/JS项目

1. 准备前端项目

确保你的项目已经准备好了所有的静态资源文件（如HTML, CSS, JavaScript等）。不需要进行任何构建步骤，因为你已经有了可以直接运行的文件。

2. 部署到Tomcat

创建一个目录：在Tomcat的webapps目录下创建一个新的文件夹，例如命名为myapp。
复制文件：将你的所有前端文件（包括HTML, CSS, JS等）复制到这个新创建的myapp文件夹中。
配置Web应用（可选）：
- 在myapp文件夹内创建一个名为WEB-INF的子文件夹。
- 在WEB-INF文件夹内创建一个名为web.xml的文件，这是标准的Java Web应用程序描述符。对于纯静态内容的应用，web.xml可以非常简单，如下所示：

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeehttp://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><welcome-file-list><welcome-file>index.html</welcome-file></welcome-file-list>
</web-app>

3. 启动或重启Tomcat

如果Tomcat已经在运行，你可以通过重启服务来使更改生效。如果还没有启动，那么现在就可以启动它了。通常可以通过命令行执行startup.sh（Linux/Mac）或startup.bat（Windows）来启动Tomcat。

4. 访问你的应用

在客户端的浏览器地址栏输入 http://<服务器IP>:<端口号>/<应用名> 来访问你的前端页面。例如，如果服务器IP为192.168.1.100，端口号为8080，应用名为myapp，则应访问 http://192.168.1.100:8080/myapp/。

8080 则是Tomcat中配置的端口，配置地点：

找到这个地方

（二）使用Vue框架的项目[VUE]框架网页开发02-如何打包Vue.js框架网页并在服务器中通过Tomcat启动-CSDN博客

1. 构建Vue项目

确保你已经安装了Node.js和npm（或yarn）。在你的Vue项目根目录下运行构建命令：

npm run build

或者如果你使用的是Yarn：

yarn build

这个命令会在项目的dist文件夹中生成生产环境的静态资源文件如下图：

你会惊奇的发现框架发布后的文件目录和自己不用框架开发的目录不是一样么！

2. 准备Tomcat

确认你已经在服务器上安装并配置好了Apache Tomcat。启动Tomcat服务，确保它正常工作。你可以尝试在浏览器中访问 http://localhost:8080 来检查Tomcat是否正在运行（默认端口是8080）。

3. 部署构建后的Vue项目

创建一个目录：在Tomcat的webapps目录下创建一个新的文件夹，例如命名为myvueapp。
复制文件：将构建输出的dist文件夹中的所有内容复制到这个新创建的myvueapp文件夹中。
配置Web应用（可选）：
- 在myvueapp文件夹内创建一个名为WEB-INF的子文件夹。
- 在WEB-INF文件夹内创建一个名为web.xml的文件，如下所示：

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeehttp://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><welcome-file-list><welcome-file>index.html</welcome-file></welcome-file-list><error-page><error-code>404</error-code><location>/index.html</location></error-page>
</web-app>

4. 启动或重启Tomcat

如果Tomcat还没有启动，现在可以启动它。如果已经启动，则可以重启以使更改生效。通常可以通过命令行执行startup.sh（Linux/Mac）或startup.bat（Windows）来启动Tomcat。

5. 访问你的Vue应用

在浏览器中输入 http://<服务器IP>:<端口号>/<应用名> 来访问你的Vue应用。例如，如果服务器IP为192.168.1.100，端口号为8080，应用名为myvueapp，则应访问 http://192.168.1.100:8080/myvueapp/。

四、注意事项

1. 安全性

公开暴露Tomcat服务可能带来安全风险，请确保采取适当的安全措施，比如限制对Tomcat管理界面的访问、定期更新软件版本等

2. 性能优化

对于高流量网站，考虑使用反向代理服务器（如Nginx）来提高性能和安全性

3. 解决常见问题

模块解析错误

如果你的Vue项目在构建过程中遇到模块解析错误，例如：

ERROR in ./src/components/Home.vue?vue&type=script&lang=js 1:0-196 1:0-196 1:197-382 1:197-382 Module not found: Error: Can't resolve '../assets/project4.jpg' in 'D:\Node\leoyangWeb\vuegaoxiao01\src\components'

请检查以下几点：

文件路径：确保引用的文件路径正确。
文件名和扩展名：确认文件名和扩展名是否完全匹配（包括大小写）。
相对路径：尝试使用相对路径来引用文件