如何在服务器上使用nginx部署iview-admin（vue cli 3.0）

最新推荐文章于 2022-12-12 17:31:47 发布
最新推荐文章于 2022-12-12 17:31:47 发布
阅读量522 收藏 1
点赞数
分类专栏： 学习记录 文章标签： vue.js 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40366684/article/details/108789980
版权
本文档介绍了如何在服务器上利用nginx部署基于vue cli 3.0构建的iview-admin应用。首先，你需要准备好nginx环境，然后配置iview-admin的请求URL和基础路径，解决跨域问题。接着，修改nginx配置文件以指向应用的静态文件，并在服务器上开放相应端口。
摘要由CSDN通过智能技术生成

如何在服务器上使用nginx部署iview-admin（vue cli 3.0）

环境准备

nginx

需要安装nginx网上有很多教程，在Ubuntu系统下：
https://blog.csdn.net/qq_23832313/article/details/83578836
在CentOs上：
https://blog.csdn.net/t8116189520/article/details/81909574?utm_medium=distribute.pc_relevant_t0.none-task-blog-OPENSEARCH-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-OPENSEARCH-1.channel_param

ivew-admin配置

请求url的设置

在ivew-admin中使用global.vue统一处理请求路径，通过这种方式不用再处理跨域问题：

在这里插入图片描述

​ 接下来在main.js将对应的BASE_URL挂载到axio的原型中：

最低0.47元/天 解锁文章
Omndzzz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何使用nginx实现前后端分离部署（iview-admin+webpack+nginx+laravel）
WhatPrime的专栏
12-24 1901
        前两天在工作中遇到一个问题：如何使用nginx配置laravel项目，使前后端分离在不同监听端口上，通过切换url实现前端和后端的分离展示。我在网上也查找了许多方法，但是大多数方法都不适用，在这里将我的方法分享一下。         前端使用iview-admin框架搭建项目，webpack打包，后端使用laravel-admin实现。首先打开nginx配置文件/etc/ngin...
Linux 使用nginx部署iview-admin项目
Wjhsmart的博客
01-23 3118
本篇博客记录了在linux系统中部署并启动iview-admin项目
iview-admin 部署到子路经
weixin_43784341的博客
08-31 1683
例如想访问:https://www.foobar.com/center/ 或者需要使用nginx代理,嵌套项目到某平台里面的时候 2、nginx配置 这里使用alias ，不能用root server { listen 80; server_name localhost; client_max_body_size 200m; location / { #root /usr/share/nginx/html/;
iview-admin nginx 部署子目录
小划乐的博客
01-18 2641
例如访问url为 http://www.myapp.com/my-app/ 1、修改项目下的 vue.config.js 部署环境改为子目录的名称 2、nginx配置 这里使用alias ，不能用root server { listen 8080; server_name www.myapp.com; location /my-ap...
iview-admin打包vue-cli3.0版
weixin_30500105的博客
08-23 193
　　由于第一次接触vue-router vue-cli iview-admin，所以很多地方还是比较蒙的，项目开发差不多了想自己在本地看看，然后试着运行npm run build，结果发现打包完成的index.html打开是空白的。 　　后来追着大神问找到了解决办法。 　　iview-admin是用的cli3.0，所以之前的的build文件夹以及里面经常配置的文件是没有的，这些配置可以在项目根...
node 最新版 yum 部署 +iview admin 线上部署 nginx配置
weixin_33722405的博客
06-05 234
node 最新版 yum 部署 curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash - sudo yum remove -y nodejs npm sudo yum install -y nodejs npm npm install -g cnpm --registry=https://re...
Vue-cli项目部署到Nginx服务器的方法
10-16
- 如果你需要在同一台 Nginx 服务器上部署多个 Vue CLI 项目，可以通过修改每个项目的 `vue.config.js` 文件中的 `publicPath`，设置不同的前缀，如 `/vue1/` 和 `/vue2/`。 - 分别将每个项目的构建文件复制到对应...
nginx部署访问vue-cli搭建的项目的方法
08-28
在使用 Nginx 部署 Vue-cli 搭建的项目时，我们需要配置 Nginx 服务器，包括了以下几个步骤： 1. 创建后台服务器对象：首先，我们需要创建一个后台服务器对象，以便 Nginx 服务器可以与之通信。在上面的配置文件中...
web服务器nginx+部署前端vue项目
最新发布
03-22
在中国大陆，许多大型互联网公司如百度、京东、新浪、网易、腾讯、淘宝等都在使用 Nginx 作为它们的核心服务器之一。 Nginx 的主要特点包括： - **高并发处理能力**：能够高效地处理大量并发请求。 - **低内存占用*...
Vue-CLI 3.X 部署项目至生产服务器的方法
10-17
当我们使用 Vue-CLI 3.X 创建的项目开发完成后，通常需要将项目部署到生产服务器上，以供用户访问。Vue-CLI 3.X 的项目构建完成后会生成一个 dist 目录，这个目录下的文件包含了所有静态资源，可以被静态文件服务器...
vue-iview3-admin:基于Vue CLI 3 + iView3的Vue.js后台管理系统
03-11
关于 介绍基于Vue-Cli3 + iView3的后台管理系统 技术栈Vue，Axios，Webpack，ES6，Vue路由器，Vuex，Sass等 截图 登录界面家庭面 常用命令 # 下载代码 $ git clone https://github.com/dingFY/vue-iview3-admin.git # 安装依赖 $ npm install # 开发调试 $ npm run dev # 代码校验 $ npm run lint # 构建 $ npm run build 规范 项目结构 |-- public // 网站公共目录 |-- src // 源码目录 | |-- api // 接口管理目录 | |-- ass
iview：基于Vue CLI 3和iView的管理模板。基于Vue CLI 3 + iView的Vue.js后台管理系统
02-06
关于 介绍 基于Vue CLI 3 + iView的后台管理系统，支持：开发调试，构建，代码规范校正等。 技术栈 Vue，Webpack，ES6，Vue路由器，Vuex，Sass，PostCSS等。 例子 线上的例子 用户：admin 密码：123456 服务端框架 命令 # 下载代码 $ git clone https://github.com/zhaotoday/iview.git # 安装依赖 $ npm install # 开发调试 $ npm run serve # 代码校验 $ npm run lint # 构建 $ npm run build 规范 项目结构 |-- public
iview + Nginx 发布部署
Juson的博客
03-21 1728
现在开发的项目大部分都是前后端分离，既然选择了前后端分离，我们就应该抛弃传统，将静态页面和后端服务一起打包，放在Tomcat里面。提供Web服务功能的软件有很多，个人还是比较推荐Nginx，官方 Nginx 处理静态文件并发 5w/s，并且内存和 cpu 占用率低（为 Apache 的 1/5-1/10）。下面我们就以 iview 为案例讲述一下发布流程。 1，在 iview 框架中找到 bui...
iview-admin搭建过程
rosykee的专栏
12-17 383
先安装好 git和npm工具 github地址：https://github.com/iview/iview-admin 下载项目工程 进入目录后执行命令 >> npm install 如果提示连接失败，可以试试配置淘宝的镜像 （执行命令 npm config set registry https://registry.npm.taobao.org），再次执行npm install 成功后，执行npm run dev 项目就运行起来了。 ...
iview-admin源码分析（三）：登录页面及逻辑实现
yiyu_j的博客
08-08 4394
目录前言正文一、登录页面安装 vue-routerconfig 配置文件1、login.vue二、登录逻辑 前言 上一篇介绍了如何在 IDEA 中创建 Vue项目和导入 IView，这篇将介绍登陆页面及登录逻辑的实现。 正文 一、登录页面 安装 vue-router Terminal 中输入 cnpm install vue-router --save src 文件夹下创建 router 文件夹，router 文件夹下新建 index.js 和 routers.js 文件。 在 index.js 中导入
iview-admin部署linux nginx报500错误的问题记录
weixin_30363981的博客
09-01 227
遇到个新服务器部署iview-admin之后 在nginx配置文件有个user配置项 这里需要配置为root或者可以读取本地文件的用户 站点配置如下 server { listen 8090; server_name localhost; location / { root /root/web/dist; ...
vue3构建view admin后台管理系统——技术选型
关注前端，关注原创
12-12 1257
深入了解vue3文件结构，彻底学会如何在vue中使用插件与工具，基于vue3+view ui，构建一套企业级管理平台
vue前后分离项目部署（不同端口号，nginx反向代理解决跨域问题）
xuan2717的博客
07-15 198
vue前后分离项目部署（不同端口号，nginx反向代理解决跨域问题）
如何部署vue前端项目到服务器上（nginx处理跨域）
热门推荐
sherry_chan的博客
01-14 6万+
注： 本文选择了nginx做web服务器。 因为在本文vue前端项目中，需要从接口获取数据，可是数据与vue前端项目是在同一ip地址但不同端口号，所以需要跨域读取数据。本文的跨域处理是使用了nginx。 环境： 阿里云服务器（ubuntu 64bit） xshellnginx 1.使用xshell登录到阿里云服务器。安装nginx（本文安装到/etc下） cd /etc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值