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项目,动态演示效果如下。