nginx部署vue项目后微信授权跳转始终跳到welcome to nginx欢迎页问题解决

本文记录了在Windows环境下使用Nginx部署多个Vue项目的详细步骤,包括Vue项目的配置调整、Nginx配置文件的修改以及解决打开页面总是跳转到Nginx欢迎页的常见问题。主要涉及Vue的publicPath和router.base设置,以及Nginx server块的location配置。通过正确配置,成功实现了通过http://192.168.1.16:1111/simplevantvue/访问项目。

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

搞了2天部署测试,始终就是出现打开地址后跳转到nginx的默认欢迎页,代码怎么弄都没用,后来发现还是nginx配置问题,这里记录下整个流程:

首先我们的前提是nginx中部署多个VUE项目

1、在VUE项目里面的vue.config.js文件中config下面的publicPath值需要指定,我这里是publicPath: "/simplevantvue"(如果还有另一个项目同样的把/后面的替换成相应的值)。其次可选设置outputDir: 'simplevantvue',如果不设置默认build之后是dist文件夹,设置了就是对应设置的文件夹。

2、修改router里面的值,看个人实际项目搭建情况(有的人是router.js,有的人是index.ts或其他),对于vue 3.0之前版本,将里面的base值改为相对应的,这里是export default new Router({base:'/simplevantvue'})。对于>=vue 3.0的,将createRouter里面的history值改为相对应的值,这里是history: createWebHistory('/simplevantvue')。

3、windows里部署,下载nginx解压后,我这里为D:\nginx-1.20.2  进入此目录,打开nginx.conf,添加一个server,如下:

server {
        listen       1111;
        server_name  192.168.1.16;

        location /simplevantvue {
             root html;
             index index.html index.htm;
                     try_files $uri $uri/ /simplevantvue/index.html;
         }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

4、将build的文件夹拷贝到html目录下

5、执行http://192.168.1.16:1111/simplevantvue/就可以打开了

注意:nginx配置里面的try_files后面的/simplevantvue一定要加,不然总是跳到nginx欢迎页。

如果要再在1111端口添加另一个,则只需要在添加一个location

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值