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

叁歲伎倆 2023-01-03 12:51 213阅读 0赞

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

niginx的安装和启停操作参照博客：[https://blog.csdn.net/qq\_26666947/article/details/112272058][https_blog.csdn.net_qq_26666947_article_details_112272058]

### 1、打包vue项目 ###

（1）在前端编译工具的终端界面中，使用命令：npm run build，对vue项目进行打包，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]  
（2）打包完成之后，vue项目中会生成一个dist文件夹，里面放置打包完成的前端项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]  
dist文件夹中的内容为：  
![在这里插入图片描述][20210108110227578.png]

### 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项目，动态演示效果如下。  
![在这里插入图片描述][20210108110429939.gif]

[https_blog.csdn.net_qq_26666947_article_details_112272058]: https://blog.csdn.net/qq_26666947/article/details/112272058
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: /images/20221119/6244d19f72f148c990c4728e2d4b4c32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]: /images/20221119/02f5fa28799c40ff8a6b2e13d3784769.png
[20210108110227578.png]: /images/20221119/9acacfb1b2e44378ac70a8e993b904a2.png
[20210108110429939.gif]: /images/20221119/b8287aeaac3844caa98619149bd6ad9d.png