Vue项目打包部署到nginx服务器上运行

idea中vue项目配置打包:
Vue项目打包部署到nginx服务器上运行_第1张图片
不在idea这样配置执行也行,在项目下直接执行 npm run build:prod也可以的,原理一样
执行后,生成的打包文件夹dist:
Vue项目打包部署到nginx服务器上运行_第2张图片
至此,vue项目打包完成,开始搭建nginx环境,以下只做windows的演示,换到其它系统环境原理一样。
nginx下载连接:
https://download.csdn.net/download/lx1315998513/21079299
解压nginx到无中文符号的文件夹目录下:
Vue项目打包部署到nginx服务器上运行_第3张图片
把打包好的html放到nginx-html目录下
Vue项目打包部署到nginx服务器上运行_第4张图片
再nginx-conf修改配置文件:
Vue项目打包部署到nginx服务器上运行_第5张图片
cmd下执行nginx,无错误提示则启动成功,按照配置文件的端口进行访问
Vue项目打包部署到nginx服务器上运行_第6张图片
成功访问:
Vue项目打包部署到nginx服务器上运行_第7张图片

你可能感兴趣的:(Vue,nginx,nginx,vue)