nginx部署vue-admin-template

最新推荐文章于 2023-09-18 15:57:57 发布
最新推荐文章于 2023-09-18 15:57:57 发布
阅读量1.4k 收藏 2
点赞数
文章标签： nginx vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40361198/article/details/108762411
版权

nginx部署vue-admin-template

	(当前在windows本机部署)  Linux服务器部署可参照该过程

1、安装nginx

下载nginx压缩包	http://nginx.org/en/download.html

在这里插入图片描述
下载完成后解压缩包，进入nginx根目录、使用命令启动nginx: start nginx
在这里插入图片描述
浏览器输入localhost:80,若页面跳转nginx页面则表示安装成功！

2、打包部署vue-admin-template项目

1、使用npm run build:stage
在这里插入图片描述
2、配置nginx配置文件
进入nginx文件夹下的conf文件，打开nginx.conf文件，修改端口以及配置子目录
在这里插入图片描述
3、部署
在nginx目录里面的html文件夹中新建doctor文件夹
将vue-admin-template项目中的dist文件夹下的所有东西复制粘贴到nginx目录下的html下的doctor文件夹中
在这里插入图片描述
重启nginx，在浏览器输入localhost:8090/doctor，进入网站页面
在这里插入图片描述

4、错误处理

虽然项目部署启动成功，但是当点击登录时报请求失败，使用火狐浏览器打开控制台的network，可以看到该请求路径的前面加了一个前缀/stage-api，使原后端接口请求由/doctor/login变为/stage-api/doctor/login。

使用nginx代理可以解决此问题：打开nginx.conf文件配置以下内容
在这里插入图片描述
配置完成、重启，进入页面点击登录，登录成功！

未知数-zyx
关注
Vue和Vue-Element-Admin（十二）：proxy解决dev跨域
叶子叶来
05-21 1367
跨域一般后端解决，中间加一层nginx就ok，dev开发环境npm run dev后默认使用9527端口，注释掉mockjs拦截增加api配置就会涉及跨域问题，因为开发中前后端分离，后端接口肯定不是9527，可以使用proxy配置解决跨域问题，在9527上运行的前端api都转成本地的api； 修改vue.config.js，后端是9904端口，新增proxy里面把process.env.VUE_APP_BASE_API路径转发： devServer: { port: port, o
前端项目vue-admin-template 部署
qq_40596257的博客
03-28 4553
上个文章记录了怎使用vue-admin-template进行二次开发，今天记录下项目开发完了怎样部署在自己的服务器上： 新手，我推荐安装宝塔界面，方便 今天我们就使用xshell和xftp，首先连接上自己的服务器 第一步：下载nginx 然后再nginx官网下载linux版本的nginx，然后上传到服务器上，可以使用xftp拖上去，然后放在随便一个文件夹，或者自己新建一个文件夹，然后解压这就要使用命令来解压了 第二步：上传和解压 解压命令： 　　命令格式：tar -zxvf 压缩文件名.tar
Vue+vue-admin-template+nginx后台（Windows）部署
莫闲的专栏
09-29 2308
服务器环境： 电信服务器：有网环境，但是访问不了外网，只开放了几个特定的端口，可以进行mstsc远程（但必须外挂环境，你懂的），windows 2012 R2版本（因为Linux不太会，而且距机房太远，怕出问题） 系统： 1、springBoot后台，接口 9000 2、vue_admin_template项目，请求后台接口9000 本身接口8082（项目内已经配置完成，貌似是我自己想多了），打包就不讲了，按README.md说明来就行，但注意两点： a、将vue.config.js文件中的pu.
vue-element-admin项目部署 nginx动态代理 含Docker部署、 Jenkins构建
最新发布
专治八阿哥的孟老师
09-18 1262
vue-element-admin部署，后端用nginx动态代理，Docker镜像，Jenkins构建
Vue 打包发布Nginx配置
qq_1336674576的博客
06-19 1447
Vue 发布Nginx配置
【前端】【vue】【nginx】nginx部署vue打包的前端项目
初叙
08-12 2408
描述：从未部署的vue项目，开始准备了tomcat和nginx，最后发现nginx比较方便，nginx部署的话只准备nginx就可以了。 nginx部署过程： 1、下载nginx的压缩包，直接解压到目的路径就可以。 2、将vue项目打包后的文件夹放在nginx安装路径下的html文件夹中。 3、配置nginx的配置文件（\conf\nginx.conf） 如图，改三个地方 （1）项目启动地址端口： listen：vue启动端口 ...
nginx部署vue项目，路由配置，后端访问接口配置
weixin_45393413的博客
08-22 8308
nginx部署vue项目，配置前端项目访问子路径，后端访问接口路径配置
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
10. **部署与上线**：了解如何将vue-admin-template项目打包，并部署到服务器，如使用nginx或Apache配置反向代理。 通过深入学习和实践这些知识点，你不仅可以掌握vue-admin-template的使用，还能提升自己的Vue.js...
SpringBoot Vue-admin-template 实现增删改查.docx
06-27
在本文中，我们将探讨如何使用SpringBoot和Vue-admin-template实现一个基本的增删改查功能。首先，Vue-admin-template是一个基于Vue.js的后台管理模板，它可以帮助开发者快速搭建后台管理系统。而SpringBoot则是一个...
vue-admin-template地址栏刷新或F5刷新返回404或空白的问题
ithover的博客
05-13 851
vue-admin-template刷新的时候会遇到404或空白的问题，这个问题是因为开启了history模式 但是后台的nginx或apache并没有支持，这时把后台nginx或apache加上就可以了 #nginx location / { try_files $uri $uri/ /index.html; } #apache <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^inde
vueadmin-template应用1：安装入门
u013089490的博客
12-14 3008
vueadmin-template模板使用目前是比较流行的，它是在elementui基础上再次封装的。github地址：https://github.com/PanJiaChen/vue-admin-template 1、安装 在GitHub上https://github.com/PanJiaChen/vue-admin-template下载，下载完之后我们把名称修改一下为自己的名称，然后进行...
vue项目部署到nginx并上传到云服务器中的基本步骤
qq_45126286的博客
04-10 1969
关于vue项目开发完成后，一般选择部署在Nginx服务器中，相比之下，nginx服务器还是有很多优点的。作为一个高性能的 HTTP 和 反向代理 服务器，也是一个 IMAP/POP3/SMTP 代理服务器。因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。 部署流程如下： 1. 在编译器里面将开发完成的Vue项目进行打包，在终端输入 npm run build 打包完成后的项目...
vue-admin-template解决跨域问题详解
qq_41665826的博客
05-22 4359
vue-admin-template入门详解(后端springboot+sprngsecurity+jwt+redis) 自&如 2020-05...
vue项目如何部署到nginx服务器
热门推荐
田兴的博客
11-12 3万+
mac下安装nginx 安装工具： homebrew（还没用过的小伙伴可以点链接进行了解或者自行百度） 步骤： 1、打开终端，习惯性命令：更新 brew update 2、终端继续执行命令： brew search nginx //查询要安装的软件是否存在 3、这里我们多执行一步“废”命令，不过有利于我们后面的配置： brew info nginx 我们可以看到，nginx在本地还未安装（Not installed），nginx的来源（From），Docroot默认为/usr/local/v
Vue项目发布并部署到Nginx的实践笔记
肖永威的专栏
11-09 3399
本文记录vue-element-admin/template项目发布，及部署到windows操作系统山的Nginx服务上的过程，包括遇到的vue-element-admin/template配置与git配合等问题。。
如何将vue项目部署到nginx服务器
web_Fkk的博客
07-09 2309
一、window系统下载nginx 建议下载稳定版，下载后解压到某个文件夹 进入nginx文件夹有个cmd窗口也就是(nginx.exe)，双击启动nginx 在浏览器输入localhos，看到下面的页面就是启动成功 二、mac下载nginx 首先，mac系统下载得用brew 安装工具： homebrew（还没用过的小伙伴可以点链接进行了解或者自行百度） 标题 兼容性 组件库的开发和调试都使用Chrome浏览器，没有时间和精力做其他浏览器的兼容，尤其是IE。所以请使用Chrome浏览器。 功
Vue项目如何打包并部署(nginx)
web18536564348的博客
09-10 2756
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
Ningx快速入门
sinat_15433607的专栏
09-20 3847
原文链接：http://www.cnblogs.com/jingmoxukong/p/5945200.html 作者：        博客园-静默虚空 概述 什么是nginx? Nginx (engine x) 是一款轻量级的Web 服务器 、反向代理服务器及电子邮件（IMAP/POP3）代理服务器。 什么是反向代理？ 反向代理（Reverse Pr
vue项目打包部署nginx（全流程）
m0_53525025的博客
02-09 1526
nginx 部署vue 项目全流程
vue-admin-template部署
09-08
要部署vue-admin-template，您需要按照以下步骤进行操作： 1. 下载vue-admin-template并解压缩。 2. 将打包编译的三个文件复制到NGINX配置的路径下。例如，您可以将这些文件放在D:/vue/vue-admin/文件夹下。 3. 在NGINX安装目录下的html文件夹中创建一个名为vue-admin的文件夹，用于缓存文件。 4. 打开nginx.conf文件并添加以下内容： ``` server { listen 9371; server_name localhost; location /vue-admin/ { root D:/vue; autoindex on; autoindex_exact_size on; autoindex_localtime on; } location /vue/api/v1/ { proxy_pass http://192.168.10.102:8080; } add_header Access-Control-Allow-Origin "*"; default_type 'text/html'; charset utf-8; } ``` 请注意，这里的配置路径和端口号根据您实际的情况进行修改。 5. 保存nginx.conf文件并重启NGINX服务。 6. 验证NGINX配置文件是否正确：运行`./nginx -t`命令。 7. 查看NGINX进程号：运行`ps -ef|grep nginx`命令。 8. 启动NGINX服务：运行`./nginx -c nginx/conf/nginx.conf`命令。 9. 如果需要重启NGINX服务，可以运行`./nginx -s reload`命令。 请根据上述步骤进行操作，即可成功部署vue-admin-template。请确保按照指定的路径和配置进行操作，并根据需要进行相应的修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值