天天看点

在nginx 服务器部署vue项目

以人人快速开发的开源项目:renren-fast-vue 为例

注:这里开始认为各位都会使用nginx 

测试打包的项目是否可以运行

在nginx 服务器部署vue项目

 可以正常运行

编译报错请移步到:[email protected] 项目编译报错: build `gulp`

接下来将renren-fast-vue 项目生成的dist 目录修改为:renren-fast-vue 并压缩为:renren-fast-vue.zip

复制renren-fast-vue.zip 到服务器

解压到:/usr/local/nginx/

vue项目的nginx配置文件不直接在nginx.conf中进行配置,将配置保存在/usr/local/nginx/conf/vhost/renren-fast-vue.conf

配置内容为:vi /usr/local/nginx/conf/vhost/renren-fast-vue.conf

将renren-fast-vue项目的配置文件:/usr/local/nginx/conf/vhost/renren-fast-vue.conf 导入到nginx.conf

管理nginx

测试服务

在nginx 服务器部署vue项目

到目前为止vue项目部署成功了,接下来通过浏览器,用域名访问

域名为:server_name www.renrenfastvue.com;

在windows 的 C:\Windows\System32\drivers\etc\hosts 文件配置DNS 域名解析

在nginx 服务器部署vue项目

 在浏览器地址栏输入:http://www.renrenfastvue.com:7000/

登录的默认账号密码是:admin

在nginx 服务器部署vue项目

 ps:如果监听端口为80,则不需要在域名后面添加端口

欢迎收藏点赞

 转载请指明出处:https://www.cnblogs.com/dennyLee2025/p/13686498.html

继续阅读