nginx配置vue前端工程和后端工程,nginx 部署 vue

VUE项目学习（三）：win10版nginx部署vue项目

niginx的安装和启停操作参照博客：https://blog.csdn.net/qq_26666947/article/details/112272058

1、打包vue项目

（1）在前端编译工具的终端界面中，使用命令：npm run build，对vue项目进行打包，如下图所示。

（2）打包完成之后，vue项目中会生成一个dist文件夹，里面放置打包完成的前端项目

dist文件夹中的内容为：

2、编辑配置文件

（1）在nginx的根目录下，点击conf文件夹，编辑nginx.conf配置文件；

（2）增加sever配置，我这里因为还要配置前端服务器，所以就新建一个server，并配置对应的端口
注意：这里的root是vue项目打包完成之后的dist文件夹

server { listen 8082; server_name dist; root G:/vue/demo/dist; #访问文件根目录 autoindex on; #是否浏览文件下的列表 location / { #是否允许跨域 add_header Access-Control-Allow-Origin *; } add_header Cache-Control "no-cache,must-revalidate";# 是否缓存 }

（3）在安装目录的cmd界面中执行命令 nginx -s reload，使更改生效。

注意：如果nginx服务器未启动就执行更改命令会出错，可以先运行start nginx启动nginx服务，在执行更改命令。

（4）由于vue项目的路径有自己的规定，所以在浏览器中输入：http://localhost:8082/#/，即可访问vue项目，动态演示效果如下。

2分快三计划listen 8082; server_name dist; root G:/vue/demo/dist; #访问文件根目录 autoindex on; #是否浏览文件下的列表 location / { #是否允许跨域 add_header Access-Control-Allow-Origin *; } add_header Cache-Control "no-cache,must-revalidate";# 是否缓存 }

（3）在安装目录的cmd界面中执行命令 nginx -s reload，使更改生效。

注意：如果nginx服务器未启动就执行更改命令会出错，可以先运行start nginx启动nginx服务，在执行更改命令。

（4）由于vue项目的路径有自己的规定，所以在浏览器中输入：http://localhost:8082/#/，即可访问vue项目，动态演示效果如下。