vue 部署tomcat 或则 nginx_node vue 部署 tomcat-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38599724/article/details/95988199

本文介绍了Vue项目的部署，包含环境信息，如Java、npm、node、vue等版本。详细说明了部署到Tomcat和Nginx的步骤，部署到Tomcat要处理跨域问题，注意vue.config.js配置；部署到Nginx要注意接口格式、文件路径及nginx.conf修改，还提及常用命令和代理配置注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境信息

java -version java version "1.8.0_201"

catalina Using CATALINA_BASE: "D:\install\apache-tomcat-9.0.21"

npm -v 6.4.1

node -v v10.15.3

vue -V 3.70

Stable version nginx/Windows-1.16.0 pgp nginx下载

部署到tomcat

部署到tomcat需要后台处理跨域问题

vue.config.js

重点关注：baseUrl: process.env.NODE_ENV === 'production' ?'/dist/' : '/',

module.exports = {
    // publicPath: './',
    baseUrl: process.env.NODE_ENV === 'production' ?
        '/dist/' :
        '/',
    outputDir: 'dist',
    assetsDir: 'static',
    lintOnSave: false,
    devServer: {
        open: true,
        host: "localhost",
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: {
            '/api': {
                target: 'http://xx.xx.xx.xx:8888',
                // target: 'https://api.apiopen.top',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            },
        }
    }

}

npm run build 出包dist

将 dist 文件夹拷贝到 D:\install\apache-tomcat-9.0.21\webapps\

startup.bat 访问 https://localhost /8080/dist.

如果页面空白请检查路由配置：mode:"history"改为mode:"hash"即是默认

部署到nginx

后台接口：http://192.168.3.XXX:8125/video/moreresult?resultID=" + imgUuid

注意xxx.vue的接口格式：this.$axios.get("/api" + "/video/moreresult?resultID=" + imgUuid)

将dist文件夹拷贝到 D:\install\xnginx-1.16.0\html\ （此路径每层不能已n开头，例如：nginx许改为xnginx,因为/n会进行转义 ）

修改 D:\install\xnginx-1.16.0\conf 目录下的nginx.conf

 server {
        listen       8007; #访问地址的端口
        server_name  localhost; #访问地址

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:\install\xnginx-1.16.0\html; #dist路径
            index  index.html index.htm;
        }
		
		location /api/{
           proxy_pass http://192.168.3.XXX:8125/; #后台接口地址
        }

        #error_page  404              /404.html;
        .
        .
        .
        }

nginx 常用命令：启动命令 start nginx 关闭命令 nginx -s quit 重新启动命令 Nginx -s reload

访问 https://localhost /8007/dist

注意事项：nginx中配置proxy_pass时

location /api/ {

proxy_pass http://192.168.3.XXX:8125/;

}

会被代理到 http://192.168.3.XXX:8125/video/moreresult?resultID=" + imgUuid

location /api/ {

proxy_pass http://192.168.3.XXX:8125;

}

会被代理到 http://192.168.3.XXX:8125/api/video/moreresult?resultID=" + imgUuid

location /api/ {