Windows使用Nginx部署Vue项目,动静分离配置
1.打包Vue项目npm run build打包完成后会得到一个【dist】静态资源2.下载nginx压缩包nginx下载我这里下载的是windows稳定版解压点击nginx.exe启动,访问localhost出现下面提示,说明启动成功3.部署vue到nginx把打包vue生成的dist文件夹复制到nginx的html目录下进入conf目录,打开nginx.conf文件,置nginx跳转路径,将路
1.打包Vue项目
npm run build
打包完成后会得到一个【dist】静态资源
2.下载nginx压缩包
nginx下载
我这里下载的是windows稳定版
解压点击nginx.exe启动,访问localhost出现下面提示,说明启动成功
3.部署vue到nginx
把打包vue生成的dist文件夹复制到nginx的html目录下
进入conf目录,打开nginx.conf文件,置nginx跳转路径,将路径修改成我们项目的访问路径
测试访问成功
此时我们刷新页面会出现404
此时我们需要加一个配置try_files $uri $uri/ /index.html;处理页面刷新404,配置保存后记得重启nginx
nginx.exe -s reload
location / {
root html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
4.nginx常用命令
运行命令前需要先跳转到目录nginx,文件夹敲cmd回车,可以快速定位到该路径。
//启动nginx
start nginx
//停止nginx
nginx.exe -s stop
//重启nginx
nginx.exe -s reload
//强制关闭所有nginx
taskkill /IM nginx.exe /F
//查看nginx版本
nginx -v
前后端分离配置后端接口,prod-api是访问后端的api前缀,
location /prod-api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8080/;
}
动静分离配置
动静分离,通过中间件将动态请求和静态请求进行分离,分离资源,减少不必要的请求消耗,减少请求延时。
好处:动静分离后,即使动态服务不可用,但静态资源不会受到影响
通过中间件可以将动态请求和静态请求进行分离
location / {
#页面路径
root C:\\Users\\TANGSHUAI\\Desktop\\Nginx\\nginx-1.12.2\\html\\static;
index index.html index.htm;
}
#配置静态资源路径
location ~\.(gif|jpg|jpeg|png|bmp|swf|css|js)$ {
root C:\\Users\\TANGSHUAI\\Desktop\\Nginx\\image;
}
nginx用的80端口,直接访问image下面的图片
更多推荐
所有评论(0)