ubuntu中利用nginx部署vue项目的完整步骤
更新时间：2022年02月20日 10:38:36 作者：拉里拉
Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器,在BSD-like 协议下发行,下面这篇文章主要给大家介绍了关于ubuntu中利用nginx部署vue项目的相关资料,需要的朋友可以参考下
1.安装nginx
更新源列表
apt-get update
安装nginx
apt-get install nginx
检查nginx是否安装，输入如下命令后若出现版本号则安装成功
nginx -v
启动nginx
server nginx restart
在浏览器输入ip地址，若出现如下页面则启动成功
2. 打包上传vue项目到服务器
打包
我的项目使用的是vs code，在终端输入如下命令进行打包
npm run build
上传
打包完成后会有dist文件，该文件为打包完成后的项目,该文件中有index.html和static两个内容。
将该dist文件上传到服务器的某个位置即可
我上传到/home/ubuntu文件中
配置nginx
修改nginx.conf
安装nginx后，nginx的默认目录是/etc/nginx
在该目录中有nginx.conf文件，输入如下命令，使用vi打开该文件
vi nginx.conf
我的nginx.conf文件原内容如下
user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
##
# Gzip Settings
##
gzip on;
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
#mail {
# # See sample authentication script at:
# # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
# # auth_http localhost/auth.php;
# # pop3_capabilities "TOP" "USER";
# # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
# server {
# listen localhost:110;
# protocol pop3;
# proxy on;
# }
#
# server {
# listen localhost:143;
# protocol imap;
# proxy on;
# }
#}
在http模块中加入如下内容,表示配置文件要引用hosts文件夹下的host后缀的文件。该host后缀文件就是用来配置vue项目的，一个host文件配置一个vue项目
include /etc/nginx/hosts/*.host;
修改后文件如下
user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
##
# Gzip Settings
##
gzip on;
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
include /etc/nginx/hosts/*.host;#新添加的一行
}
#mail {
# # See sample authentication script at:
# # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
# # auth_http localhost/auth.php;
# # pop3_capabilities "TOP" "USER";
# # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
# server {
# listen localhost:110;
# protocol pop3;
# proxy on;
# }
#
# server {
# listen localhost:143;
# protocol imap;
# proxy on;
# }
#}
创建*.host文件
在/etc/nginx中创建hosts文件夹
mkdir hosts
在host文件中创建syt.host文件，文件名随便命名
在文件中添加如下内容
server {
listen 8080;#自己设置端口号
server_name syt;#自己设置项目名称
#access_log logs/host.access.log main;
location / {
root /home/ubuntu/dist;#这里写vue项目的所在地址
index index.html;#这里是vue项目的首页，需要保证dist中有index.html文件
}
error_page 500 502 503 504 /50x.html;#错误页面
}
重启nginx
nginx -s reload
访问vue项目
ip:port/index.html即可进行访问
常见错误
浏览器访问时显示403
这个问题有多种原因，我当时遇到的原因是该项目所在的文件没有权限访问。我的项目所在文件是/home/ububtu/dist
使用如下命令保证可以访问(比较暴力qaq)
chmod -R 777 home
chmod -R 777 ubuntu
chmod -R 777 dist
总结
到此这篇关于ubuntu中利用nginx部署vue项目的文章就介绍到这了,更多相关ubuntu用nginx部署vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue实现兄弟组件之间跳转指定tab标签页，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
resetFields 对整个表单进行重置,将所有字段值重置为空并移除校验结果,下面这篇文章主要给大家介绍了关于vue中resetFields重置初始值不生效的原因的相关资料,需要的朋友可以参考下2023-03-03
vant-list上拉加载onload事件触发多次问题及解决
这篇文章主要介绍了vant-list上拉加载onload事件触发多次问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
在vue中,key是dom对象的标识,本文主要介绍了Vue中key的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
本文主要介绍了ElementUI嵌套页面及关联增删查改实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了vue鼠标悬停事件，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue中如何使用jest单元测试，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
在实际项目开发中,我们经常会遇到选项卡切换,对于一个前端工程师来说,组件化/模块化开发是一种必备的行为规范,下面这篇文章主要给大家介绍了关于vue使用动态组件实现TAB切换效果的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue轮播图插件vue-concise-slider的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
Vue中mintui的field实现blur和focus事件的方法
今天小编就为大家分享一篇Vue中mintui的field实现blur和focus事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论