nginx同一端口部署多个vue项目

nginx同一端口部署过个vue项目背景nginx配置文件功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入背景因该应用嵌

duan_aduan

3619人浏览 · 2021-11-30 19:20:34

duan_aduan · 2021-11-30 19:20:34 发布

nginx同一端口部署过个vue项目

背景
- nginx配置文件

背景

因该应用嵌入在企业微信中，且企业微信中内置的网页应用配置主页需要二级域名所以导致测试新增功能时还须使用原有域名，这就导致一个端口需要运行两个vue项目。

nginx配置文件

server {
        listen       53211; #监听的端口 也就是域名映射出去的端口
        server_name  localhost;

        location / { #生产环境项目
            root   html;
            #index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /api {
            rewrite  ^.+api/?(.*)$ /$1 break;
            proxy_pass  http://localhost:8089;
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         }
		location /en { #测试环境项目
            alias  html/en;
            try_files $uri $uri/ /en/index.html;
            index  index.html;
         }
    }

重点代码

	    location /en { #测试环境项目
            alias  html/en;
            try_files $uri $uri/ /en/index.html;
            index  index.html;
         }

vue中修改如下配置
vue.vue.config.js文件中修改publicPath路径为/en/
在这里插入图片描述

module.exports = {
    publicPath: "/en/",
    devServer: {
        proxy: {
            '/api':{
                changeOrigin:true,
                // target: 'http://10.1.0.236:8089',
                target: 'http://localhost:8089',
                pathRewrite: {
                    '^/api': ""//将api替换成‘’
                }
            },
        },
        port:8090
    },
    lintOnSave: false
}

router文件夹中index.js文件中修改base为 ‘/en/’
在这里插入图片描述

const router = new VueRouter({
  mode: 'history',
  base: '/en/',
  routes
})

vue代码修改完毕后npm run build 将生成的dist中的文件复制到nginx配置的对应路径中如下代码

location /en {
  alias  html/en;#将dist中的文件复制到该路径中
   try_files $uri $uri/ /en/index.html;
   index  index.html;
}

最后重启nginx

Windows下启动、重启、停止nginx
在Windows下操作nginx，需要打开cmd 进入到nginx的安装目录下

1.启动nginx:

   start nginx 或 nginx.exe

2.停止nginx(stop是快速停止nginx，可能并不保存相关信息；quit是完整有序的停止nginx，并保存相关信息)

  nginx.exe  -s stop 或 nginx.exe -s quit

3.检查 重启：

  nginx -t  修改nginx配置后执行检查配置是否正确

  nginx -s reload 重启

吃水不往挖井人：
1、通过该博主视频学会的nginx部署vue项目
2、nginx 同一端口部署多个项目