win10 使用nginx搭建本地测试环境（踩坑）

目录

1.下载

2.配置

3.启动服务

4.查看

5.停止服务，重启服务

6.参考链接

---

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”。

6.参考链接

nginx中文文档、nginxWindows版本压缩包下载地址