vue项目 使用nginx代理

vue

nginx是一个高性能的HTTP和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理服务器。本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构建。

npm run build

通过上面命令后打包好的静态资源将输出到dist目录中。如图所示

如图所示

修改nginx配置文件,配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段

  server {

listen 8888;#默认端口是80,如果端口没被占用可以不用修改

server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

root E:/vue/my_project/dist;#vue项目的打包后的dist

location / {

try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404

index index.html index.htm;

}

#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件

#因此需要rewrite到index.html中,然后交给路由在处理请求资源

location @router {

rewrite ^.*$ /index.html last;

}

#.......其他部分省略

}

完成nginx配置后重新加载配置文件,命令如下(ps:需要在安装的根路径下执行):

nginx -s reload

浏览器中访问:http://localhost:8888

通常情况下ngxin是安装到单独的服务器上,因此一般是把vue打包后的dist仍到服务上的具体位置,然后修改nginx.conf的root路径来指向我们的dist。

 

以上是 vue项目 使用nginx代理 的全部内容, 来源链接: utcz.com/z/377933.html

回到顶部