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项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue3.0中的monorepo管理模式的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
文章介绍了Vue单页应用中出现404错误的原因,以及如何通过配置Nginx和使用Vue Router的hash模式来解决这个问题,同时,文章还简要解释了单页应用的概念及其优点和缺点,并讨论了Router的实现方式2024-12-12
这篇文章主要给大家介绍了关于Vue.js实例方法之生命周期的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
最近工作中遇到了npm run dev报错这个问题,通过查找相关资料最终解决了,所以下面这篇文章主要给大家介绍了关于npm run dev失败的详细解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要为大家介绍了vue中使用axios请求post接口,请求会发送两次原因解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
vue3通过ref获取子组件defineExpose的数据和方法
defineExpose是Vue3中新增的选项,用于向父组件暴露子组件内部的属性和方法,通过defineExpose,子组件可以主动控制哪些属性和方法可以被父组件访问,本文主要介绍了vue3通过ref获取子组件defineExpose的数据和方法,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue中控制mock在开发环境使用,在生产环境禁用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
作为使用Vue已经很多年的人，特别是去年一直在使用 Vue3，因此，学到了很多东西。所以本文为大家准备了7个让我们成为更好 Vue 开发者的技巧，需要的可以参考一下2022-06-06
vite项目import.meta.env如何能获取非VITE开发的环境变量
这篇文章主要介绍了vite项目import.meta.env如何能获取非VITE开发的环境变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
Vue+Openlayer中使用select选择要素的实现代码
本文通过实例代码给大家介绍Vue+Openlayer中使用select选择要素，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-08-08
最新评论