首页 >  编程教程 >  javascript教程 >  正文

使用nginx部署vue项目

 作者:潘某人SEO
1250

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

第一步打包vue项目

#切换到vue项目文件夹,根据自己情况来
cd /home/www/vueweb

#打包vue项目
npm run build

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


第二步配置nginx

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;
        }
       
  }


第三步重启服务

service nginx restart


申明:本站内容仅代表个人观点,仅供学习参考;未经授权任何个人或组织单位不得复制、转载、摘编以及其它形式的应用! 本站文章可能使用到互联网上的资料,若对您造成困扰,请联系 kk19@foxmail.com除理 本文地址:https://www.chateach.com/it/javascript/765
相关文章
  • laravel Request的所有方法详解

    laravel Request,cookie,http参数

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

    1516
    • laravel Request
    • cookie
    • http参数
  • Java如何生成随机字符串

    Java字符串

    Java如何生成随机字符串,先定义一个基础字符串(即生成的每一个随机字符串里的每一个字符都要包含在这个基础字符串里面),包含字符"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"。

    1222
    • Java字符串
  • 通过 Composer 安装laravel

    Composer ,laravel

    laravel的安装方式有很多种,推荐大家通过Composer安装laravel,下面是在linux系统中使用Composer安装laravel框架的方法。

    911
    • Composer
    • laravel
  • 如何修改重置mysql密码

    重置mysql密码

    人生处处充满着意外,忘记了mysql密码无法登陆数据库,就需要重置mysql密码,今天以linux环境下的mysql数据密码的重置。大致的原理就是设置跳过数据库密码,然后设置登陆密码,在恢复数据登陆权限。

    761
    • 重置mysql密码
  • php获取当前时间操作

    php获取时间

    在PHP语言中我们如何获取当前时间呢?只要通过date()和time()函数组合使用实现。

    1300
    • php获取时间
  • java中的JDK、JRE、JVM三者的区别

    JDK,JRE,JVM

    java中的JDK、JRE、JVM三者的区别,JDK是 Java 语言的软件开发工具包(SDK);JRE(Java Runtime Environment,Java运行环境),包含JVM标准实现及Java核心类库。JVM(Java Virtual Machine),即java虚拟机, java运行时的环境,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的。

    959
    • JDK
    • JRE
    • JVM
  • lnmp环境简介

    lnmp环境简介

    LNMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写。L指Linux,N指Nginx,M一般指MySQL,也可以指MariaDB,P一般指PHP,也可以指Perl或Python。

    1371
    • lnmp环境简介
  • Vue3 中全局引入 axios及其使用方法

    axios使用方法,Vue3

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

    871
    • axios使用方法
    • Vue3
  • .gitignore不生效问题解决方法

    gitignore不生效

    git push的时候 .gitignore中已经标明忽略的文件目录下的文件,git push的时候还会出现在push的目录中,或者用git status查看状态,想要忽略的文件还是显示被追踪状态。

    1130
    • gitignore不生效
  • php将多维数组根据某个键倒序/升序

    多维数组排序

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

    2169
    • 多维数组排序
  • springboot网站搭建部署详细流程

    springboot

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

    1288
    • springboot
  • linux环境下安装nodejs

    nodejs安装

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

    957
    • nodejs安装
  • Spring Boot 如何解决跨域问题

    SpringBoot跨域

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

    800
    • SpringBoot跨域
  • Laravel邮件发送功能的实现例子

    Laravel邮件发送

    Laravel如何发送邮件呢?Laravel邮件发送功能的实现例子,从邮箱注册配置到,laravel邮件参数配置,提供纯文本邮件和富文本邮件发送两种邮件发送实例。

    1651
    • Laravel邮件发送
  • php生成n位随机数

    php随机数

    php如何生成n位的随机数,给大家分享一个简单高效的方法,这里以随机生成6位数作为一个例子给大家演示。使用php的str_pad()和mt_rand()函数生成随机数。

    1537
    • php随机数
  • Springboot如何生成cookie,获取cookie信息

    Springboot,cookie

    Springboot如何生成cookie,获取cookie信息,cookie就是一个小体积的键值对,格式:key=value;客户端和服务器端,通常使用http协议来进行数据传输,而http协议是无状态的。也就是客户端向同一个服务器端发送的第一次Request和第二次Request,是没有关联的。需要cookie来保存一些用户信息,每次向相同的域名(domian)和路径(path)发送Request时都会携带cookie。

    1033
    • Springboot
    • cookie
  • 什么是html

    什么是html

    html,全称Hypertext Markup Language,也就是“超文本链接标示语言”。HTML文本是由 HTML命令组成的描述性文本,HTML 命令可以说明文字、 图形、动画、声音、表格、链

    1243
    • 什么是html
  • 百度富文本编辑器超链接添加nofollow

    编辑器添加nofollow

    如何给百度富文本编辑器超链接添加nofollow,即如何给百度文本编辑器添加一个nofollow标签添加的功能,可以方便文本编辑超链接的时候,对站外或者站内的链接添加nofollow标签,有效的防止站点权重的分散。

    1943
    • 编辑器添加nofollow
-- 这已经是底线了,看看别的把! --