使用nginx部署vue项目

node自己本身可以作为服务器进行驱动,但是node本身对文件的处理能力并不是很好,所以当我们的生产环境中应尽量使用nginx来处理静态的资源以及反向代理,同时也解决了node分布式以及负载均衡的相关问题。在linux下如何使用nginx部署vue项目。

第一步打包vue项目

plaintext
1
2
3
4
                    #切换到vue项目文件夹,根据自己情况来
cd /home/www/vueweb
#打包vue项目
npm run build

打包完成之后在在vue项目文件夹的根目录下会生成一个dis文件

第二步配置nginx

plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
                    server {
        listen       80;#默认端口是80,根据需要更改
        server_name  localhost;#域名解析之后localhost修改为域名
        root   /home/www/vueweb/dist;#vue项目的打包后的dist
        
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        
        #重写路由
        location @router {
            rewrite ^.*$ /index.html last;
        }
      
  }

第三步重启服务

plaintext
1
                    service nginx restart
               

申明:本站内容仅代表个人观点,仅供学习参考;未经授权任何个人或组织单位不得复制、转载、摘编以及其它形式的应用!

本站文章可能使用到互联网上的资料,若对您造成困扰,请联系 kk19@foxmail.com除理

本文地址:https://www.chateach.com/it/javascript/765

相关文章

  • 拥有一个博客网站需要多少钱

    博客网站

    如果你喜欢记录生活,那么拥有一个个人的博客网站还是非常不错的,从此你不再需要遵守任何平台的规则,只需要遵守我国法律即可。人生在世短短几十年,为短暂的人生留下点痕迹,成为数字世界的终极身份证。今天潘某人SEO就为大家大致的总结一下拥有一个自己网站需要哪几步并需要多少花费。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 5017
    • 博客网站
  • springboot网站搭建部署详细流程

    springboot

    linux环境如何搭建java框架springboot,为大家演示一种快速简单的搭建springboot的方法。由于springboot是java的众多框架之一,因此需要部署好java的运行环境,即服务器安装好jdk18以及tomcat3,注意版本的兼容性。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1433
    • springboot
  • OpenSSL 拒绝服务漏洞修复教程

    OpenSSL 拒绝服务漏洞

    OpenSSL 拒绝服务漏洞修复及版本升级教程。2020年12月08日,OpenSSL官方发布安全公告,披露CVE-2020-1971 OpenSSL GENERAL_NAME_cmp 拒绝服务漏洞。EDIPARTYNAME时,由于GENERAL_NAME_cmp函数未能正确处理,从而导致空指针引用,并可能导致拒绝服务。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1226
    • OpenSSL 拒绝服务漏洞
  • centos系统如何修改超级管理员root用户名

    root用户名修改,centos系统

    centos系统修改超级管理员root用户名实例演示,只要简单的将超级管理员root用户修改掉,那么被暴力破解几率就会直线下降。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1419
    • root用户名修改
    • centos系统
  • springBoot之Thymeleaf常见语法

    springBoot,Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP,Velocity,FreeMaker 等模板引擎类似,也可以轻易地与 Spring MVC 等 Web 框架集成。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1373
    • springBoot
    • Thymeleaf
  • php将多维数组根据某个键倒序/升序

    多维数组排序

    php将多维数组根据某个键倒序/升序,一维数组可以用一个简单的krsort() 函数进行升序排列,或者使用 arsort() 函数进行降序排列 。但是如何是多维数组那么情况就会复杂很多,没有可以直接实现多维数组按照某个键值进行排序的函数。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2308
    • 多维数组排序
  • Spring Boot 如何解决跨域问题

    SpringBoot跨域

    SpringBoot 如何解决跨域问题方法,CORS全称Cross-Origin Resource Sharing,意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时,就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问,那么访问的那个资源就会遇到跨域问题。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 928
    • SpringBoot跨域
  • 页面资源加载真实进度条的详细教程

    进度条,资源加载

    分享一个基于原生javascript语法不需要任何插件来实现进度条的真实加载,按照加载资源数量的控制进度条的变化,可以实现只要网站每加载完成一个资源进度条同步变化。给站点一个真实的进度条对于用户体验还是非常友好的,一个真实的进度条可以一定程度上可以增加用户继续等待的机率。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1942
    • 进度条
    • 资源加载
  • SpringBoot如何实现邮箱验证

    SpringBoot,邮箱验证,验证码发送

    在网站及各种应用中不可避免的需要运用到邮件发送服务,如消息提醒,验证码的发送,都需要使用到邮件发送。大体思路:先生成一个六位随机验证码并存起来,调用邮箱接口发送验证码,将用户输入的验证码和之前保存的验证码进行比对。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1591
    • SpringBoot
    • 邮箱验证
    • 验证码发送
  • linux环境下安装nodejs

    nodejs安装

    linux系统下安装最新版nodejs的方法,Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1074
    • nodejs安装
  • MySQL数据库的介绍

    MySQL数据库的介绍

    MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBM

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1798
    • MySQL数据库的介绍
  • laravel Request的所有方法详解

    laravel Request,cookie,http参数

    laravel Request的所有方法详解,laravel实现如何获取cookie、表单参数、提交的文件、laravel如何获取网址url、路径、ip、端口等。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1696
    • laravel Request
    • cookie
    • http参数
  • Java字符串的替换replace()、replaceFirst()和replaceAll()

    java,字符串

    Java字符串的替换replace()、replaceFirst()和replaceAll(),如何匹配替换字符串中的内容。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 889
    • java
    • 字符串
  • vue 如何监听滚动至底部

    vue触底监听

    vue如何实现触底判断,实现无限加载等功能。当我们需要实现无限加载的时候,即实现瀑布流的功能的时候,核心就是监听页面的滚动事件,当滚动触底的时候去请求加载数据,既可以实现无限加载下拉。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1515
    • vue触底监听
  • 如何监听客户端的网络速度及质量

    网络质量

    在实际形况中,站点及应用可以满足绝对的流畅性,但是用户的网络环境千变万化,尤其是移动端用户,这种情况情况下页面加载速度的瓶颈完全就取决于用户的网络环境。通过浏览器的 Network Information API 接口中提供的Navigator对象的connection属性,来评估用户的连接速度以及设备所处的网络类型。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1216
    • 网络质量
  • 网站本地服务器搭建

    centos系统安装

    网站搭建第一步本地服务器的架设centos系统安装,对于刚接触网站编程的小伙伴不要先急着去购买服务器,当然土豪请随意。我们可以现在自己电脑上本地搭建一个虚拟服务器环境来运行,可以检测下自己是不是真的能力去搭建一个网站。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1100
    • centos系统安装
  • laravel中如何获取和设置cookie操作

    laravel ,cookie操作

    在laravel框架中 cookie的优势在于,laravel在底层会对cookie值进行加密,并且使用授权码进行签名,如果客户端修改了cookie值,那么就会失效。会比直接在php中使用cookie更加严谨安全,当然为了laravel中cookie的操作方法会与php原生的方法有所区别,虽然也可以使用php原生的方法操作,但是不推荐。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1394
    • laravel
    • cookie操作
  • Vue3 中全局引入 axios及其使用方法

    axios使用方法,Vue3

    Vue3如何安装axios,如何在全局使用axios,定义全局属性来使用axios,基本上每个页面都要使用到axios,因此在main.js中定义全局属性来实现axios告别繁杂的引用。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 984
    • axios使用方法
    • Vue3