征服Windows版nginx(2)

1.配置Nginx

编辑Nginx的配置文件(通常是nginx.conf),找到安装Nginx位置,如下路径:

D:\nginx-1.26.2\conf

双击打开nginx.CONF编辑,在http块中添加一个新的server块,用于指定Vue项目的静态文件目录和端口。例如,假设你的Vue项目构建后的静态文件被放置在D:\vue_projects\my-project\dist目录下,你可以这样配置:

http {
    server {
        listen       80;
        server_name  localhost;
 
        location / {
            #root后面是你打包vue项目位置路径
            root   D:/vue_projects/my-project/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
}

2.重启Nginx

打开任务管理器结束Nginx.exe的所有进程后,重新进入安装Nginx位置,右键以管理员身份运行

运行后可打开任务管理器查看,成功后可以看到两个nginx.exe的进程,代表nginx重启成功。

3.访问Vue项目

现在打开浏览器,访问http://localhost,应该就能看到你的Vue项目(注:这里是80端口默认没写,如更换其他端口请在后面加上端口号,如http://localhost:8000)。

注意:确保Nginx的配置文件中的路径是正确的,并且Vue项目已经构建完成。如果你的Vue项目使用了history模式的路由,还需要确保Nginx配置中有正确的try_files指令来处理路由。


                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值