服务器使用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/html
默认的配置文件为：/etc/nginx/nginx.conf

4. 开启端口80和443

前提是要先打开防火墙

systemctl start firewalld.service

重启防火墙：firewall-cmd --reload
查看防火墙状态firewall-cmd --state
关闭防火墙systemctl stop firewalld.service
开启端口firewall-cmd --add-port=8890/tcp --permanent （8890替换为要开启的那个端口）
开启80和443firewall-cmd --permanent --zone=public --add-service=httpfirewall-cmd --permanent --zone=public --add-service=https
开启后要记得重启防火墙 5. 服务器开启80和443端口号

打开服务器，点击防火墙，然后点击添加规则

在端口范围那里添加我们需要的就行了，这里我们就添加80和443

6. Nginx 基本命令

启动：systemctl start nginx
重启：systemctl restart nginx
关闭：systemctl stop nginx
查看状态：systemctl status nginx
开启开机自动启动：systemctl enable nginx
关闭开机自动启动：systemctl disable nginx

7. 验证是否安装成功

在电脑浏览器输入服务器的ip地址，出现欢迎到nginx就代表成功了，那么就可以下一步了

二、部署vue

1. 打包vue项目

npm run build // 这个看情况 如果是版本那么就根据情况

2. 上传到服务器

我们这里是把这个放到了 /usr/local/webapp这个文件夹里面
我们可以使用xftp进行上传

3. nginx配置

执行 vim /etc/nginx/nginx.conf命令 进入配置文件

这样我们的vue就部署完成了
记得重启一下nginx

4. 测试

在浏览器输入我们服务器的ip地址加上端口号就可以了

如果是其他端口那么就要考虑服务器和阿里云有没有开放该端口号

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

赞 (0)

相关推荐

  • 在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项目并使用反向代理的方法

    效果 目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出来),为了统一管理子项目的路由. 我期望实现下面的效果(假设 ip: localhost,port: 8080): http://localhost:8080/ 进入最外层的 index.html http://localhost:8080/project1 进入项目一 http://localhost:8080/project2 进入项目二 废

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

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

  • vue.js项目nginx部署教程

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构建. 开发环境搭建完成. 二.编译部署 1.项目路径下demo输入命令npm run build 编译完成后会发现在demo文件夹下多出一个dist文件夹这里面就是编译好的文件了. 2.网上下载nginx,下载地址http://nginx.org/en/download.html,解压下载的ngin

  • 解决vue项目nginx部署到非根目录下刷新空白的问题

    1.修改config/index.js 2.修改路由route/index 3.后台配置nginx 以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue打包部署到Nginx时,css样式不生效的解决方式

    今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地 使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后,通过访问是无法加载出来样式的. 于是乎,在网上开始寻找资料,发现大部分前辈的解决方案都是在,config的文件夹中的index.js assetsRoot: path.resolve(__dirname, '../

  • 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 ? '/

  • vue项目部署到nginx/tomcat服务器的实现

    开发完的vue项目,需要部署到Nginx/Tomcat服务器上运行,作为一个前端小白,刚接触vue不久,研究了一番,于是写下这篇文章,记录下来便于今后部署. 1.router(history)模式vue项目部署到nginx 1)修改router模式为history(默认为hash) const router = new VueRouter({ routes, mode: 'history' }); 对路由模式不清楚的小伙伴,可以看这篇vue-router路由模式详解 2)修改config/ind

  • 服务器使用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

  • 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项目和配置代理的问题解析

    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,在终端输入如下

  • 利用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项目的详细图文教程

    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项目及解决动态路由刷新404问题

    目录 步骤一:改端口 步骤二: 打包 步骤三:将dist文件夹上传到服务器上 步骤四:修改nginx.conf(重中之重) 步骤五:重启nginx 总结 期末月前本来部署过一次,昨天部署的时候发现又给忘了,而且出了很多问题,在这统一汇总一下. 步骤一:改端口 在vue.config.js下的devServer把host改成服务器的地址 步骤二: 打包 用npm run build打包,最后是这样的,并且目录下多了个dist文件夹 步骤三:将dist文件夹上传到服务器上 我用的xshell,没办法

  • 服务器使用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

  • nginx部署vue项目,给访问路径加前缀的实现

    目录 Nginx安装与启动 Vue增加访问路径 nginx配置 总结 Nginx安装与启动 去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 start nginx 关闭命令 taskkill /f /t /im nginx.exe 改了配置文件,不需要先关闭再启动,直接重启,重启命令 nginx -s reload Vue增加访问路径 有时候会根据需要,区分不用的v

随机推荐