如何把vue项目跑在timcat服务器下

要将Vue项目部署在Tomcat服务器上，需要经过以下几个步骤：

1. 构建Vue项目：在命令行中进入Vue项目的根目录，执行命令npm run build，这将会生成一个dist目录，其中包含了编译后的Vue项目。

2. 创建一个用于部署的Web应用程序：在Tomcat的webapps目录下创建一个新的文件夹，用于存放Vue项目的文件。例如，可以创建一个名为myVueApp的文件夹。

3. 将编译后的Vue项目文件复制到Tomcat的webapps目录下：将Vue项目dist目录中的所有文件复制到刚刚创建的myVueApp文件夹中。

4. 配置Tomcat服务器以支持HTML5路由：在myVueApp文件夹中创建一个名为WEB-INF的文件夹，在该文件夹中创建一个名为web.xml的文件，并在其中添加以下内容：

<?xml version="1.0" encoding="UTF-8"?>
<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_3_1.xsd"
         version="3.1">

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

</web-app>

这个配置将会使Tomcat在访问不存在的URL时都重定向到Vue项目的index.html文件。

5. 启动Tomcat服务器：在Tomcat的bin目录下找到启动脚本（Windows上为startup.bat，Unix-like系统上为startup.sh），执行该脚本以启动Tomcat服务器。

6. 访问Vue项目：在浏览器中输入http://localhost:8080/myVueApp（如果Tomcat服务器端口不是8080，请替换为正确的端口号），即可访问部署在Tomcat服务器上的Vue项目。

这样，你就成功将Vue项目部署在Tomcat服务器下了。记得在项目发布之前，先进行测试以确保一切正常运行。

要将Vue项目部署到Tomcat服务器上，需要完成以下步骤：

1. 确保已经安装了Node.js和npm：在命令行窗口中输入以下命令，确认Node.js和npm已经正确安装。

node -v
npm -v

如果没有安装，可以从官方网站下载并安装。

2. 在Vue项目的根目录下，运行npm run build命令：这将会在项目根目录下生成一个dist目录，其中包含了构建好的静态文件。命令如下：

npm run build

3. 将生成的静态文件复制到Tomcat的webapps目录下：将dist目录中的所有文件复制到Tomcat服务器的webapps文件夹下。确保dist目录的内容直接位于webapps目录下，而不是再嵌套一层文件夹。

4. 配置Tomcat服务器：打开Tomcat服务器的conf目录，找到server.xml文件。在文件中找到Host标签，添加一个Context标签，配置Vue项目的上下文路径和路径指向。例如：

<Host name="localhost"  appBase="webapps" unpackWARs="true" autoDeploy="true">
    ...
    <Context path="/myvueapp" docBase="myvueapp" debug="0" reloadable="true"></Context>
    ...
</Host>

其中，path属性指定了Vue项目的上下文路径，docBase属性指定了项目所在的文件夹名称。

5. 启动Tomcat服务器：运行Tomcat服务器，可以使用以下命令启动：

./catalina.sh run

可以通过访问http://localhost:8080/myvueapp来查看部署后的Vue项目。

需要注意的是，对于某些情况，可能还需要配置Vue项目的路由模式、设置基准路径和代理等。具体的配置方式取决于项目的需求和Tomcat服务器的设置。

将Vue项目部署到Tomcat服务器上需要经过以下步骤：

1. 打包Vue项目
   首先，我们需要将Vue项目打包成静态文件。在已经安装好Vue CLI的前提下，打开命令行窗口，进入Vue项目的根目录，使用以下命令进行项目打包：

npm run build

这将在Vue项目的根目录下创建一个dist文件夹，其中包含了打包后的静态文件。

2. 创建Web应用目录
   接下来，我们需要在Tomcat的webapps目录下创建一个用于部署Vue项目的Web应用目录。假设Tomcat的安装路径为/opt/apache-tomcat-9.0.0，我们可以执行以下命令在webapps目录下创建一个名为vue-app的目录：

cd /opt/apache-tomcat-9.0.0/webapps
mkdir vue-app

3. 将静态文件复制到Web应用目录
   将之前打包的静态文件复制到刚刚创建的Web应用目录下。执行以下命令：

cp -r /path/to/vue-project/dist/* /opt/apache-tomcat-9.0.0/webapps/vue-app

请将/path/to/vue-project替换为你实际的Vue项目路径。

4. 创建WEB-INF目录并添加web.xml文件
   在Web应用目录下创建一个WEB-INF目录，并在其中创建一个web.xml文件。执行以下命令：

cd /opt/apache-tomcat-9.0.0/webapps/vue-app
mkdir WEB-INF
touch WEB-INF/web.xml

然后，编辑web.xml文件，添加以下内容：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_1.xsd"
    version="3.1">

    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>

</web-app>

这个配置将告诉Tomcat在访问Web应用时，默认显示index.html。

5. 启动Tomcat服务器
   最后，启动Tomcat服务器，使用浏览器访问对应的URL来查看部署的Vue应用。在命令行中执行以下命令启动Tomcat：

cd /opt/apache-tomcat-9.0.0/bin
./catalina.sh run

启动后，可以通过访问http://localhost:8080/vue-app来查看部署的Vue应用。请根据实际情况替换localhost和8080为正确的主机和端口。

这样，Vue项目就成功部署到了Tomcat服务器上，可以在浏览器中访问了。