nginx部署vue项目的详细图文教程

首先需要在服务器里下载nginx，

apt-get install nginx

检查nginx是否安装，输入如下命令后若出现版本号则安装成功

nginx -v

然后启动nginx

server nginx restart

如果有如下报错，则按照它的提示下载相关插件

我这里下载了2次不同的插件。直到运行server nginx restart指令成功

此时打开浏览器，输入你的服务器ip，就可以看到nginx启动成功

之后进行Vue项目打包：

在你一般输入运行npm run dev的地方输入npm run build就可以完成打包。

如果打包失败有提示build不存在之类的语句，如图：

那就试试npm run build:prod，完成打包！

之后会在项目根目录下自动生成一个默认dist文件夹

然后如果你是在本地打包的话，需要将此文件夹上传至你的服务器上。后边需要用到。

这里强烈建议将dist文件放在服务器里专门放项目的文件夹，后边设置路径的时候方便查找，比如我是放在了/home/ubuntu/myapp/ruoyi/ruoyi-ui的文件夹下

接下来配置 Nginx

一定要停止nginx的运行，否则配置可能不生效！(关于如何停止nginx，网上教程很多，就找到进程杀死进程就可以，或者用一句指令停止)

我们需要修改nginx.conf

找到有nginx.conf文件的目录，我们可以用sudo whereis nginx.conf找到该路径然后进入该目录

修改nginx.conf，输入如下命令：sudo vim nginx.conf,然后你如果是首次配置的话，可以直接复制我下边的代码，记得要修改root里dist的路径。

如果是之前配置过其它项目的话，只用把我http里边包含的 server 复制到你的文件对应位置就行！

user root;
worker_processes  1

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /home/ubuntu/myapp/ruoyi/ruoyi-ui/dist; # 路径改成自己的dist路径
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        location /prod-api/{
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://localhost:8080/; #设置监控后端启动的端口
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
                root html;
        }
}

然后保存并退出。

重启nginx

nginx -s reload

然后访问ip号就可以运行出页面了！！

大功告成！

总结

到此这篇关于nginx部署vue项目的文章就介绍到这了,更多相关nginx部署vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue项目部署的实现（阿里云+Nginx代理+PM2）

    最近部署一个Vue项目到阿里云ECS上,因为项目涉及一些跨域请求,所以采用了Nginx代理请求本地的node服务(利用pm2做进程管理).node服务借助axios设置headers的referer.host转发请求,解决跨域请求问题. 先交代下在阿里云ECS里安装的部署环境:phpstudy(php调试运行大礼包,里面包含nginx.mysql等,还能监控端口占用情况).pm2(node服务进程管理工具).node.git等等. 部署过程 拉去GitHub项目代码至root目录下(找到安装ph

  • vue项目打包部署_nginx代理访问方法详解

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

  • nginx通过https部署vue项目的完整步骤

    目录 一.生成证书 进入nginx安装目录 创建ssl文件目录 生成server.key,需要设置两次密码 生成无密码的server.key 创建服务器证书的申请文件 server.csr 生成crt证书文件server.crt 二.nginx配置 三.修改vue配置文件 总结 本篇主要记录vue项目,通过nginx实现https部署的免费方案.主要参考步骤和关键点如下所示. 一.生成证书 进入nginx安装目录 # 进入nginx目录 [root@hecs-402944 nginx]# cd

  • nginx下部署vue项目的方法步骤

    今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来. 首先要去nginx官网下下载nginx: 下载地址:https://nginx.org/en/download.html 下载下来会是一个解压包,解压到你想放的文件夹下 运行nginx.exe,然后打开浏览器输入localhost出来如下图片所示就说明成功了: 然后如果没有成功出来的话也不要慌不要怕,可能是你的端口被别的内容所占了这时你就打开你的nginx的目录下找到conf 点击进去然后找到一个ngi

  • 服务器使用Nginx部署Vue项目

    服务器使用Nginx部署Vue项目

    目录 一.安装Nginx 二.部署vue 首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6 一.安装Nginx 1. 使用XShell连接我们的服务器 2. 配置 EPEL源 sudo yum install -y epel-release sudo yum -y update 3. 安装Nginx sudo yum install -y nginx 以下的内容需要记住,特别是配置文件安装成功后,默认的网站目录为: /usr/share/nginx/h

  • Vue项目打包并部署nginx服务器的详细步骤

    Vue项目打包并部署nginx服务器的详细步骤

    目录 使用场景: 一.打包 二.部署(nginx) 总结 使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署. 一.打包 vue项目其实可以直接通过一下语句进行打包: npm run build 默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置: 1.首先在项目根目录下创建vue.config.js文件 配置内容如下所示(附带跨域问题解决): module.exports = { //打包 publicPath: './', output

  • 在nginx上部署vue项目(history模式)的方法

    vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下: http://localhost:8080/bank/page/count

  • nginx部署多个vue项目的方法示例

    上一篇已经介绍了然后配置web项目:今天由于公司需求,需要在同一域名端口下,部署两个项目:今天花了一上午终于弄好了,选择赶紧做一个笔记. 如何连接阿里云服务器就不在这里说了,请看我以前的文章. 首先需要的效果 http://47.97.244.83/login http://47.97.244.83/student/login 文件目录 两个项目并列在同一文件夹内. 准备好两个vue的项目 http://47.97.244.83/login:这个不用修改配置直接build就可以.关键是二级域名的

  • nginx部署vue项目的详细图文教程

    nginx部署vue项目的详细图文教程

    首先需要在服务器里下载nginx, apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 然后启动nginx server nginx restart 如果有如下报错,则按照它的提示下载相关插件 我这里下载了2次不同的插件.直到运行server nginx restart指令成功 此时打开浏览器,输入你的服务器ip,就可以看到nginx启动成功 之后进行Vue项目打包: 在你一般输入运行npm run dev的地方输入npm

  • 服务器使用Nginx部署Springboot项目的详细教程（jar包）

    1,将java项目打成jar包 这里我用到的是maven工具 这里有两个项目,打包完成后一个为demo.jar,另一个为jst.jar 2.准备工具 1.服务器 2.域名(注:经过备案) 3.Xshell用于连接服务器 4.WinScp(注:视图工具,用于传输jar) 3.将jar包传入服务器 直接拖动即可 3.使用Xshell运行jar包 注:(服务器的java环境以及maven环境,各位请自行配置,这里不做描述.) cd到jar包路径下执行:nohup java -jar demo.jar

  • 基于maven搭建一个ssm的web项目的详细图文教程

    1:使用idea建立一个web项目 2:引入pom依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.

  • jenkins+maven+svn自动部署和发布的详细图文教程

    Jenkins Jenkins是一个开源的.可扩展的持续集成.交付.部署的基于web界面的平台.允许持续集成和持续交付项目,无论用的是什么平台,可以处理任何类型的构建或持续集成. 通常我们使用Jenkins主要实现以下功能: 持续集成指的是,频繁地(一天多次)将代码集成到主干.将软件个人研发的部分向软件整体部分交付,频繁进行集成以便更快地发现其中的错误. 持续交付指的是,频繁地将软件的新版本,交付给质量团队或者用户,以供评审.如果评审通过,代码就进入生产阶段. 正文开始 博主前几个月刚被忽悠到一

  • Docker镜像+nginx 部署 vue 项目的方法

    一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西. 如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目. 二.获取nginx 镜像 nginx 是一个高性能的HTTP和反向代理服务器,此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像. 在终端输入: docker pull nginx 即可以获取到ngin

  • 利用nginx部署vue项目的全过程

    利用nginx部署vue项目的全过程

    首先需要在服务器里下载nginx, apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 然后启动nginx server nginx restart 如果有如下报错,则按照它的提示下载相关插件 我这里下载了2次不同的插件.直到运行server nginx restart指令成功 此时打开浏览器,输入你的服务器ip,就可以看到nginx启动成功 之后进行Vue项目打包: 在你一般输入运行npm run dev的地方输入npm

  • nginx 部署 vue 项目找不到js css文件的解决方法

    很多时候 npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件. vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容: ... module.exports = { baseUrl: isProd ? '/

  • Nginx部署vue项目和配置代理的问题解析

    Nginx部署vue项目和配置代理的问题解析

    1.nginx安装和启动 # 安装nginx sudo apt-get install nginx # 启动 sudo service nginx start 验证安装 # 安装完成后使用nginx -v检查,如果输出nginx的版本信息表明安装成功 nginx -v # 如果输出类似于这样的版本号等,证明安装完成 nginx version: nginx/1.14.0 (Ubuntu) 2.修改nginx配置文件,部署项目 查看nginx的配置,linux系统下的配置文件通常会存放在/etc目

  • ubuntu中利用nginx部署vue项目的完整步骤

    ubuntu中利用nginx部署vue项目的完整步骤

    目录 1.安装nginx 2.打包上传vue项目到服务器 配置nginx 访问vue项目 常见错误 总结 1.安装nginx 更新源列表 apt-get update 安装nginx apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 启动nginx server nginx restart 在浏览器输入ip地址,若出现如下页面则启动成功 2. 打包上传vue项目到服务器 打包 我的项目使用的是vs code,在终端输入如下

随机推荐