首页 > 系统相关 >Utuntu安装nginx并部署Vue

Utuntu安装nginx并部署Vue

时间:2024-09-06 21:14:11浏览次数:11  
标签:Vue Nginx -- nginx Utuntu install local usr

一、linux下载Ningx
1.下载nginx相关依赖包

apt-get install gcc

apt-get install libpcre3 libpcre3-dev

apt-get install zlib1g zlib1g-dev

sudo apt-get install openssl

sudo apt-get install libssl-dev
  1. 新建nginx的安装目录
cd /opt

mkdir nginx

cd nginx

3.通过wget下载nginx安装包

wget https://nginx.org/download/nginx-1.24.0.tar.gz

4.解压nginx的安装包
下载的nginx是tar.gz文件
命令:

tar -zvxf nginx-1.24.0.tar.gz

下载的nginx是zip文件
命令:

unzip nginx-1.24.0.tar.gz
  1. 切换到解压好的nginx-1.24.0目录下
cd nginx-1.24.0
  1. 配置
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

说明:
--prefix=/usr/local/nginx:指定安装目录为/usr/local/nginx。在编译和安装完成后,软件将被安装到该目录下.
--with-http_stub_status_module:启用 HTTP Stub Status 模块。该模块是 Nginx 的一个内置模块,用于获取 Nginx 服务器的状态信息。
--with-http_ssl_module:启用 HTTP SSL 模块。该模块使得 Nginx 支持通过 HTTPS 提供安全的加密传输。

  1. 编译
make
  1. 安装
make install

9.执行完成后可以在 /usr/local
在local文件夹里面创建web

把vue打包文件dist放到文件里

进入nginx文件

进入conf文件夹里

10.编辑nginx.conf文件

vim nginx.conf


修改完成后以此按 esc键 :wq 保存设置
11.启动nginx

cd /usr/local/nginx/sbin

./nginx
或者
/usr/local/nginx/sbin/nginx

关闭nginx

/usr/local/nginx/sbin/nginx -s stop

杀进程

#查看Nginx的进程
ps -ef | grep nginx

#杀死Nginx相关进程
kill xxx

标签:Vue,Nginx,--,nginx,Utuntu,install,local,usr
From: https://www.cnblogs.com/candy18/p/18400943

相关文章

  • vue.js项目实战案例源码
    关注我,持续分享逻辑思维&管理思维&面试题;可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导;推荐专栏《10天学会使用asp.net编程AI大模型》,目前已完成所有内容。一顿烧烤不到的费用,让人能紧跟时代的浪潮。从普通网站,到公众号、小程序,再到AI大模型网站。干货满满。学成后可......
  • 推荐5款免费、开箱即用的Vue后台管理系统模板
    前言在现今的软件开发领域,Vue.js凭借其高效、灵活和易于上手的特性,成为了前端开发的热门选择。对于需要快速搭建企业级后台管理系统的开发者而言,使用现成的Vue后台管理系统模板无疑是一个明智之举。本文大姚将为你推荐5款开源、免费、开箱即用的Vue后台管理系统模板,帮助你快速启动......
  • 《使用 Nginx 部署前端 Vue 项目》
    一、引言在现代前端开发中,Vue.js以其高效、灵活和易用性成为了众多开发者的首选框架。而在项目部署阶段,选择一个合适的服务器软件至关重要。Nginx作为一款高性能的Web服务器和反向代理服务器,能够为Vue项目的部署提供稳定、高效的解决方案。本文将详细介绍如何使用Ngin......
  • VUE框架Vue3使用自定义事件的方式传递数据------VUE框架
    <template><!--给User绑定事件--><!--带参数的方法不要有括号,否则识别不到,我不懂原理...--><User@event1="showInfo"></User></template><script>importUserfrom"./components/User.vue"exportdefault{......
  • 解析NaiveUiAdmin的vue开源项目(二)
     书接上回 解析NaiveUiAdmin的vue开源项目(一)-CSDN博客本章我们来看until下的包 src/utils/http/axios/Axios.tsimporttype{AxiosRequestConfig,AxiosInstance,AxiosResponse}from'axios';importaxiosfrom'axios';import{AxiosCanceler}from'./axio......
  • vue2和vue3响应式原理的区别
    vue2和vue3响应式原理的区别目录一、速度差距二、各自底层原理1.Vue2的响应式原理2.Vue3的响应式原理3.响应式性能对比三、扩展与高级技巧1.Vue2中的s......
  • vue el-select 设置默认值后选项无法切换
    解决办法:@change="$forceUpdate()"添加这个即可 完整代码:<template><el-form-itemlabel="数据类型"><el-selectv-model="queryParams.searchDataType"placeholder="请选择数据类型"clearable@change="$forceUpdat......
  • 这应该是全网最详细的Vue3.5版本解读
    版本号这次的版本号是天元突破红莲螺岩,这是07年出的一个二次元动漫,作者是没看过的。在此之前我一直以为这次的版本号会叫黑神话:悟空,可能悟空不够二次元吧。响应式响应式相关的内容主要分为:重构响应式、响应式props支持解构、新增onEffectCleanup函数、新增basewatch函数......
  • 70%的人都答错了的面试题,vue3的ref是如何实现响应式的?
    本文将通过debug的方式带你搞清楚当ref接收的是对象和原始类型时,分别是如何实现响应式的。注:本文中使用的vue版本为3.4.19。看个demo还是老套路,我们来搞个demo,index.vue文件代码如下:<template><div><p>count的值为:{{count}}</p><p>user.count的值为:{{use......
  • vue中的数据代理
    在Vue中,数据代理是一种重要的机制,它使得开发者能够更方便地访问和操作数据。一、数据代理的概念数据代理是指通过一个对象代理对另一个对象的访问。在Vue中,数据代理主要是通过Vue实例来代理对数据对象的访问。当创建一个Vue实例时,可以传入一个数据对象,Vue会将这个数......