VUE项目学习（三）：win10版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项目，动态演示效果如下。