如何在 tomcat 上部署 Vue.js 应用程序？答案

【问题标题】：How can I deploy a Vue.js app on a tomcat?如何在 tomcat 上部署 Vue.js 应用程序？
【发布时间】：2018-03-05 07:13:31
【问题描述】：

我有一个 vue.js 应用程序，我想将它部署在 tomcat 上的服务器上，它是可行的，如何实现？

【问题讨论】：

【解决方案1】：

当然可以，扩展的 tomcat 应用服务器具有如下结构：

[假设你要在tomcat中部署一个静态应用]

apache-tomcat-x.y.zz/
斌/
配置/
库/
日志/
温度/
网络应用程序/
工作/
....

只需在 weapps 文件夹中创建一个文件夹[例如 test] 并将您的静态文件放入其中http://localhost:8080/test/your_index_file.html

然而有一点值得一提，实际上tomcat是一个web服务器[更准确地说它是一个servlet容器，用于将java web应用程序部署到其中]，你应该使用像apache_http_server或nginx这样的http服务器.

【讨论】：

【解决方案2】：

不同的是，在 tomcat 中，您的应用程序将具有上下文。所以，让我们假设在你的应用程序上下文中的“应用程序名称”在 tomcat 中。

1o - 在 .env.prod 文件中创建 VUE_APP_PUBLIC_PATH = '/app-name/' 变量。（“prod”是生产环境的默认名称）

2o - 在项目根目录下创建一个 vue.config.js 并配置 publicPath

module.exports = {
    publicPath: process.env.VUE_APP_PUBLIC_PATH
};

3o - 在路由器配置文件中，为相同的值定义基本 url

let router = new Router({
    mode: 'history',
    base: process.env.VUE_APP_PUBLIC_PATH,
    ...
}

4o - 执行 "npm run build:prod" 命令（加载生产环境值）

5o - 将 npm 生成的 "dist" 目录重命名为 "app-name"

6o- 将“app-name”复制到 apache-tomcat-x.x.xx/webapps 目录。

7o- 最后，访问：http://url:port/app-name。如果 Vue 应用在 localhost 8080 端口，访问http://localhost:8080/app-name。

【讨论】：