nginx部署vue项目

在window上已经安装好了nginx的基础上,来部署VUe项目

没安装好nginx,参考这边:https://www.cnblogs.com/yingyigongzi/p/10867805.html

打包vue项目

npm run build

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

将打包好的dist文件夹复制到nginx安装目录下的html文件夹内

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

图中的localhost换成IP,例如10.8.20.300,即可在内网其他电脑上通过“http://10.8.20.300:8081”访问

 注意:

如果上面的路径: root部分

改成:root   E:/Program Files/nginx-1.16.0/html/dist;

nginx会启动不了

原因是:路径名称有空格要用引号引起来,应为不引会被当成2个路径解析

解决方法:root   'E:/Program Files/nginx-1.16.0/html/dist';

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

nginx -s reload

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

原文地址:https://www.cnblogs.com/yingyigongzi/p/10867901.html