vue项目部署到nginx服务器

1.打包vue项目
使用命令打包vue项目:

npm run build:prod

(具体命令可以查看项目下的文件:
在这里插入图片描述
)

通过命令打包好的静态资源将输出到项目的dist目录下。如图:
在这里插入图片描述
2. 安装nginx
下载windows版本的nginx压缩包,解压,如下图:
在这里插入图片描述
修改nginx配置文件,配置文件是conf目录下的nginx.conf,修改nginx.conf文件中的server配置片段中的监听端口号listen ,root中指定vue项目打包后的静态资源的存放路径,这里的html是指上图中nginx下的html目录。
在这里插入图片描述
修改完配置文件后,将打包好的静态资源dist文件夹拷贝到nginx的html目录下,可以重命名dist文件夹为指定的名称(这里重命名为是cfcp)
在这里插入图片描述
然后在nginx.exe的路径下执行命令start nginx启动nginx,
在这里插入图片描述
即可在浏览器中输入地址进行访问: http://localhost:8080/cfcp

发布了23 篇原创文章 · 获赞 2 · 访问量 4250

猜你喜欢

转载自blog.csdn.net/weixin_45616483/article/details/102471399