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

使用nginx部署vue项目

 作者:潘某人SEO
1273

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
相关文章
  • DeepSeek一键部署,不用等待模型下载,创建即可使用。

    DeepSeek部署

    DeepSeek一键部署,不用等待模型下载,创建即可使用。腾讯云Cloud Studio 内置Ollama、多个DeepSeek-R1模型 ,每月向开发者提供 10000 分钟免费算力。

    2324
    • DeepSeek部署
  • linux系统下使用Vue CLI脚手架安装vue3

    Vue CLI,vue3

    linux系统下使用Vue CLI脚手架安装vue3。Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前。端工作流提供了功能齐备的构建设置。

    1536
    • Vue CLI
    • vue3
  • laravel url路由中存在双斜杠(//)造成404问题

    laravel路由双斜杠

    解决在laravel框架下,网站的首页后面加上双斜杠(//),页面显示的尽然不是首页,是一个空白的页面状态码是200,或者报404错误。

    1972
    • laravel路由双斜杠
  • JavaScript == 与 === 区别

    == 与 === 区别

    js中==和===的区别 ==和===的区别和一些比较规则: == 在比较类型不同的变量时,会进行数据类型转化,将二者转换成数据类型相同的变量,再进行比较。对于 string、number 等基础类型,== 和 === 是有区别的 a)不同类型间比较,== 之比较 "转化成同一类型后的值" 看 "值" 是否相等,=== 如果类型不同,其结果就是不等。

    889
    • == 与 === 区别
  • SpringBoot--Thymeleaf日期格式处理

    Thymeleaf,日期格式

    Thymeleaf作为众多模板引擎中的一种,我最初也是对它充满了陌生,在SpringBoot如何处理时间格式,SpringBoot--Thymeleaf日期格式处理。

    995
    • Thymeleaf
    • 日期格式
  • php简介

    什么是php

    PHP即“超文本预处理器”,是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习

    1367
    • 什么是php
  • Laravel邮件发送功能的实现例子

    Laravel邮件发送

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

    1693
    • Laravel邮件发送
  • 原生js 复制内容到剪切板代码实现

    js 复制内容,剪切板代

    有时候为了提升用户体验,比如在某些页面需要实现点击内容,将内容复制到剪切板,可以提升用户复制内容的操作效率;因此在实际操作中通过一定的事件触发复制功能是非常有意义的行为,下面是两种通过原生js实现复制内容到剪切板。

    1225
    • js 复制内容
    • 剪切板代
  • 手把手教你建立一个自己的网站

    零基础建站

    本站的主要的是分享自己建站过程中遇到的各种问题和解决方案,适合没有任何基础但是想要建立自己的一个网站的朋友,其实如果想要简单的入门让一个网站跑起来是非常的简单的。如果说是采用wordpress等CMS系统来搭建一个网站的话就更加简单了。进本上只要动手能力自学能力强一点,基本上几个小时就可以让一个站点运行起来。

    1673
    • 零基础建站
  • Laravel Module开发包安装方法

    Laravel Module

    linux环境下通过composer安装Laravel 模块化laravel-modules包,实现laravel 的模块管理器。

    1517
    • Laravel Module
  • centos下修改ssh端口

    ssh端口,

    服务器如何修改默认的ssh端口,修改ssh默认端口是非常有必要的可以保证登陆的安全性。

    1258
    • ssh端口
  • HTML marquee标签如何制作滚动文字

    marquee标签,滚动文字

    在HTML页面中可以使用marquee标签实现页面文字滚动效果,给大家分享的是有关HTML代码如何制作滚动文字的内容。HTML技术中使文字滚动的方法是使用双标签marquee。

    1083
    • marquee标签
    • 滚动文字
  • Vue 中使用 localStorage 详解

    localStorage,Vue

    什么是localStorage,与cookie的区别是什么,localStorage的生存期、数据结构、域名限制、浏览器支持;localStorage常用方法,存储数据setItem、读取数据getItem、修改数据、删除数据。

    1385
    • localStorage
    • Vue
  • js防抖原理及其实现

    js防抖

    js防抖原理及其实现,在前端中有一些事件会频繁的触发容易造成页面卡顿,例如:window 的 resize、scroll、mousedown、mousemove、keyup、keydown等事件。js抖动的原因:短的时间内多次连续触发事件,首先会十分影响性能,同时大量运行结果被集中输出,结果之间不规律的冲突变化导致页面抖动。

    1307
    • js防抖
  • laravel如何封装函数全局调用

    laravel函数封装

    laravel如何封装函数,实现全局调用。我们就拿PHPAnalysis分词程序作为例子来演示下。PHPAnalysis分词程序使用居于unicode的词库,使用反向匹配模式分词,理论上兼容编码更广泛,并且对utf-8编码尤为方便。

    1706
    • laravel函数封装
  • Laravel的简介及其安装方法

    Laravel安装方法

    linux下使用composer的方式安装laravel 9.x版本的方法,及laravel的简介,Laravel是一套简洁、优雅的PHP Web开发框架,它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁、富于表达力。具有了一套高级的PHP ActiveRecord实现 -- Eloquent ORM。

    1123
    • Laravel安装方法
  • springboot如何对html进行转义及恢复

    html转义,springboot

    Spring HtmlUtils把HTML编码转义,可将HTML标签互相转义,HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用。

    2208
    • html转义
    • springboot
  • linux换将下安装Composer的方法

    Composer安装

    linux换将下安装Composer的方法,对于需要使用laravel框架开发站点,安装Composer是非常有必要的,可以使得laravel的安装管理变得更加的方便快捷。

    1116
    • Composer安装
-- 这已经是底线了,看看别的把! --