vue 部署tomcat 或则 nginx

环境信息

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/ {

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

}

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

location /api/ {

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

}

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