一、mac上安装nginx
brew install nginx
# 核心安装目录,启动文件在该目录的bin下面,欢迎页面在html下面。 /usr/local/Cellar/nginx/1.12.2_1 # 核心配置文件路径 /usr/local/etc/nginx/nginx.conf # 服务器默认路径 /usr/local/var/www
访问http://localhost:8080,成功说明安装好了。
二、nginx命令行
# 开启 sudo nginx # 查看是否正常开启 ps aux|grep nginx # 杀掉进程,比如PID为21391 sudo kill -QUIT 21391 # 关掉 sudo nginx -s quit # 重启 sudo nginx -s reload
三、nginx配置文件
1、网站目录权限问题(403 Forbidden)
user root owner;
2、设置网站根目录
root /Users/crazy/Desktop/code/crazyman.github.io/dist;
3、设置server_name
做dns解析
#nginx.conf文件
server_name www.website.info;
打开finder,调出前往文件夹,输入/private/etc/,找到hosts文件,复制一份出来,修改
#hosts文件 127.0.0.1 www.website.info
再覆盖etc下的hosts文件,就可以用www.website.info访问本地服务器(nginx)。
如果生产环境模拟好了,记得把hosts文件再恢复到原来的样子,即去掉127.0.0.1 www.website.info,否则会出现一件尴尬的事,就是你线上访问www.website.info,老说「拒绝了我们的连接请求」。
另外,如果之前把dist目录没有提交到github,在.gitignore中忽略了,最后发布的时候,记得npm run build ,然后修改.gitignore文件,把产出目录dist提交上去。怪不得我纳闷儿本地的nginx跑的好好的,怎么到了真实环境就不行了呢?文件都没交上去,咋访问啊?
4、单页应用刷新后404
单页面应用在webpackdevserver都正常,部署到服务器后,一刷新,就404了。下面提供3种解决方案,仅供参考。
方案A:vue路由用hash模式,不用服务器做任何配合工作。 方案B:vue路由用history模式,nginx需要配置404页面。 error_page 404 /404.html; 方案C:vue路由用history模式,出错总是跳到当前页面。 try_files $uri $uri/ /index.html;