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

Question

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

Answer 1

当然可以，扩展的tomcat app服务器有这样的结构：

[假设您要将静态应用程序部署到tomcat]

Apache的Tomcat的x.y.zz /     
斌/     
的conf /     
的lib /     
日志/     
温度/     
的webapps /     
工作/     
....

只需在weapps文件夹中创建一个文件夹[例如test]并将静态文件放入其中[只记得要处理相关的资源路径]，然后启动tomcat并在浏览器中引用如下链接： http://localhost:8080/test/your_index_file.html

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

Answer 2

不同之处在于在tomcat中，您的应用程序将具有上下文。 因此，我们假设您在tomcat内的应用程序上下文中使用“ app-name”。

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-在路由器配置文件中，为相同的值定义基本网址

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

4o-执行“ npm run build：prod” 命令（以加载生产环境值）

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

6o-将“应用名称”复制到apache-tomcat-x.x.xx / 网络应用目录中。

7o-最后，访问：http://url:port/ 应用名称。如果Vue应用程序位于localhost 8080端口，请访问http://localhost:8080/app-name。