位置: IT常识 - 正文
推荐整理分享Vue项目部署(Nginx)(vue项目部署到服务器上,页面空白),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:vue项目部署到服务器上,页面空白,vue项目部署到服务器上,页面空白,vue项目部署到服务器,vue项目部署需要node吗,vue项目部署到服务器上,页面空白,vue项目部署到linux服务器,vue项目部署到服务器上,页面空白,vue项目部署到服务器上,页面空白,内容如对您有帮助,希望把文章链接给更多的朋友!
本次使用云主机作为部署主机。
2、Vue项目打包切换到项目所在目录,使用 npm run build 命令完成项目打包,会生成一个dist文件夹
编译后生成的dist文件夹:3、Nginx服务器部署(1) 安装编译器及依赖的库yum -y install make zlib zlib-devel gcc gcc-c++ libtool openssl openssl-devel pcre pcre-devel(2)下载Nginx并解压cd /usr/local && wget http://nginx.org/download/nginx-1.21.6.tar.gz && tar zxvf nginx-1.21.6.tar.gz(3)安装Nginxmake && make install #执行目录中的makefile文件 (4)验证安装版本(5)指定配置文件启动及停止操作指定配置文件启动:
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf停止Nginx服务:
/usr/local/nginx/sbin/nginx -s stop(6)创建网站根目录并放入vue项目这里在创建好网站根目录后,把第2步中打包的vue项目放到该目录下
(7)配置Nginx服务Nginx配置文件:/usr/local/nginx/conf/nginx.conf在配置文件中,需要修改:
location下的root到自己的网站根目录,在这里我设定的是 /www/html/distserver_name:该属性用于定义服务器的访问ip,默认是localhost就代表仅可本地访问,如果服务器有自己对应的外网ip,修改为自己的外网ip即可。(这里我对应的是云主机的ip)完成以上配置后,重启Nginx服务,并完善防火墙相关配置。
4、访问对应页面
上一篇:北方针叶林中的欧洲棕熊幼崽,芬兰 (© Jules Cox/Minden Pictures)(北方针叶林的特征有哪些?)
下一篇:前端:vscode中使用npm安装依赖并运行项目(vscode怎么运行前端)
友情链接: 武汉网站建设