目录
1.下载
地址:
http://nginx.org/en/download.html
下载到本地后解压安装包(我放在c盘方便寻找),无需安装,双击根目录下的应用程序即可启动nginx服务(暂时不用启动,先进行配置,稍后将通过命令启动)。
2.配置
打开/conf/nginx.conf文件,修改配置
server {
listen 80; #监听端口
server_name 127.0.0.1; #访问域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / { #站点目录
root D:\workspace\myProject\dist;
index index.html index.htm;
}
}
location中配置的是项目打包后的入口目录,为‘D:\workspace\myProject\dist’,index.html是位于dist根目录下的入口文件。
注:此项目为单页应用,因此只需要配置一个入口;若不是单页应用,或有多个入口页面时,则需要配置多个入口。如下:
server {
listen 80; #监听端口
server_name 127.0.0.1; #访问域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / { #站点目录
root D:\workspace\myProject\dist;
index index.html index.htm;
}
location /home { #站点目录
root D:\workspace\myProject\static;
index index.html index.htm;
}
}
未配置第二个location之前,若直接访问“127.0.01:80/home”就会找不到页面,现在配置了/home路径指向的站点就可以了。
踩坑:楼主的项目中使用了history模式的路由(不带#号),vue项目原本的默认路由模式是hash(带#的路由)。history路由模式下的项目,直接访问入口目录以外的其他目录就会返回404,这时候需要加一些配置来让nginx支持history模式,如下:
location / {
root D:\workspace\makino\dist;
index index.html index.htm;
try_files $uri $uri/ /index.html; #官方推荐,支持history
error_page 404 /index.html; #匹配404页面
}
这样配置后就可以愉快的访问“127.0.01:80/home”页面了。
3.启动服务
找了网上一些的教程
启动的命令有几种
1. start nginx
2. nginx.exe
3. ./nginx
进入nginx解压包的根目录,打开终端,执行以上命令中的任意一条,即可启动,但是楼主这边本地执行时只要是以nginx为开头的命令就会一直报如下错误,包括停止命令“nginx -s stop”或“nginx -s quit”,重启命令“nginx -s reload”。
最终通过“.\nginx”成功启动服务。
4.查看
打开浏览器,输入配置文件中配置域名及端口号“http://127.0.0.1:80”,即可看到项目。
这里需要注意的是端口不能与其他本地服务冲突。
若浏览器出现如下页面:
说明配置文件中的配置不正确,找不到项目入口就会显示nginx默认的欢迎页。
5.停止服务,重启服务
参考以下命令
// 停止,执行以下任意一条命令
1. nginx.exe -s stop
2. nginx.exe -s quit
3. nginx -s stop
4. nginx -s quit
5. ./nginx -s stop // 楼主使用的
// 重启,执行以下任意一条命令
1. nginx.exe -s reload
2. nginx -s reload
3. ./nginx -s reload // 楼主使用的
鉴于楼主本地执行nginx开始的命令就会报错,只能使用“./nginx -s stop”和“./nginx -s reload”。