征服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
指令来处理路由。