[VUE]框架网页开发02-如何打包Vue.js框架网页并在服务器中通过Tomcat启动

在现代Web开发中，Vue.js已经成为前端开发的热门选择之一。然而，将Vue.js项目打包并部署到生产环境可能会让一些开发者感到困惑。本文将详细介绍如何将Vue.js项目打包，并通过Tomcat服务器启动运行。

1. 准备工作

确保你的项目能够正常运行,项目目录中启动cmd

npm run dev 

2. 打包Vue.js项目

2.1 安装依赖

进入你的Vue.js项目目录，并安装所有依赖：

cd my-vue-app
npm install

2.2 打包项目

使用以下命令来打包Vue.js项目：

npm run build

 

打包完成后，你会在项目的dist目录下看到生成的静态文件。

3. 配置Tomcat服务器

3.1 安装Tomcat

首先，确保你已经在服务器上安装并配置好了Tomcat。你可以从Apache Tomcat官网下载并安装Tomcat。

3.2 创建应用目录

在Tomcat的webapps目录下创建一个新的文件夹，例如myapp，然后将Vue.js打包后的dist目录中的所有文件复制到这个新创建的文件夹中。

• 将构建输出的dist文件夹中的所有内容复制到Tomcat的webapps目录下的一个新文件夹中。例如，你可以创建一个名为myvueapp的新文件夹，并将dist文件夹中的所有内容复制到这个新文件夹中。
• 确保myvueapp文件夹内包含了一个index.html文件和其他必要的静态资源（如CSS、JS、image\html等）。

3.3 创建WEB-INF/web.xml (可选)

虽然对于纯静态内容的应用来说，web.xml不是必需的，但为了确保兼容性，你可以在myvueapp文件夹内创建一个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/javaee
         http://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>

4. 启动或重启Tomcat

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

5.访问你的Vue应用

• 在浏览器中输入http://<服务器IP>:8080/myvueapp/来访问你的Vue应用。例如，如果服务器IP为180.132.15.96，则应访问 http://180.132.15.96:8080/myvueapp/。
• 8080 则是Tomcat中配置的端口，配置地点：

找到这个地方

注意事项

• 路由模式：如果你的Vue应用使用了HTML5 History模式（即路由不带#），你需要确保服务器能够正确处理这些路由请求。这通常意味着你需要在Tomcat中配置一个错误页面重定向到index.html。你可以在web.xml中添加以下内容来实现这一点：

<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>