antdPro Nginx 打包部署

最新推荐文章于 2024-03-19 11:57:44 发布
最新推荐文章于 2024-03-19 11:57:44 发布
阅读量1.7k 收藏 2
点赞数
文章标签： 运维 javascript python ViewUI
原文链接：https://my.oschina.net/Cathygy/blog/2395995
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

打包命令很简单，直接看config.js文件里的配置： npm run build

然后就是安装Nginx环境，安装的教程网上可多了，所以安装环境什么的都很顺利

安装完之后需要配置代理服务器获取后台的接口数据：找到安装的Nginx 的nginx.conf文件，在server 中添加代理服务器

010f95ec2dc574a2867828d497816ca0cac.jpg 

被很丑的马赛克遮住的就是服务器的路径，和前端代码中的路径是一致的

配置这个以后还需要在设置

8572e8ef92dc7a335a44d9ccaa8404e4460.jpg

第二句话是指定入口文件，如果没有index.html就找index.htm

第三句就是重点了，如果没有这句话部署之后的页面在刷新或者是输入路径进入时都会出现404的错误，我就是受了这个苦啊

道理是什么呢我也不太清楚，对于部署什么的不太了解，出现了这个问题才去看了下。

转载于:https://my.oschina.net/Cathygy/blog/2395995

weixin_34235371
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Antd-pro的交互和部署
qq_38086776的博客
11-29 1119
在react框架中，集成化的脚手架最方便的当然是Antd-pro了，在框架中和后台数据交互时，我们可以使用axios、jquery(不推荐)、使用框架自带的proxy(代理)，本篇博客中主要讲述了关于如何在antd-pro中使用proxy和框架自带的request和后台交互，以及如何部署到apache2服务器中。
Ant design 使用nginx部署
w345731923的专栏
07-28 1043
环境： Ant design Pro：v5 ts nginx：1.21.0 详情参考Ant design Pro 部署篇：https://pro.ant.design/zh-CN/docs/deploy 官方推荐使用默认的browserHistory和nginx 使用browserHistory则需要服务器做好处理 URL 的准备，处理应用启动最初的/这样的请求应该没问题，但当用户来回跳转并在/users/123刷新时，服务器就会收到来自/users/123的请求，这时你需要配置服...
Nginx 部署 Ant Design pro
weixin_33850890的博客
05-21 979
利用AntDesignpro开发的项目，如何用Nginx部署呢？ 第一步：把项目打包，打包命令如下： npm run build 运行完毕会在项目目录下生成dist文件夹。 第二步：想要测试打包好的代码是否可以正常运行，安装serve，如下命令 npm iserve -g serve安装完毕，利用serve运行打包好的代码，运行命令： serve dist 测试完毕，代码...
antdPro项目部署到nginx
weixin_43916065的博客
07-31 3822
部署前准备 在完成你的antd项目之后，从coding或者你的git服务器上克隆项目到本地 $ git clone 你的项目 $ cd project $ npm install 成功下载完所有配置文件之后执行，再次确认你的项目可以正确访问 $ npm start 即可自动打开浏览器的8000端口，成功运行该项目，如果没有自动弹出则访问localhost:8000/ 部署配置 在项目中的.roadhogrc文件中删除以下配置 "proxy": { "/api": { "target": 你的后台
nginx配置二级域名静态资源加载失败(antd pro of vue)
yynikki的博客
05-22 929
Vue Cli 3 打包 静态资源404
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...
Vue中跨域及打包部署到nginx跨域设置方法
10-16
主要介绍了Vue中跨域以及打包部署到nginx跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
在Nginx上部署ThinkPHP项目教程
10-24
主要介绍了在Nginx上部署ThinkPHP项目的方法,十分详细，需要的朋友可以参考下
vue打包部署nginx 配置
01-24
本文将深入探讨“Vue打包部署Nginx配置”的相关知识点。 一、Vue.js项目打包 Vue.js项目在开发完成后，需要通过Webpack进行打包。Webpack是一个模块打包工具，它将各种资源（如JavaScript、CSS、图片等）视为模块...
使用 Nginx 部署静态页面的方法
09-30
本篇文章主要介绍了使用 Nginx 部署静态页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于自己Nginx的使用（ant design pro 部署）
最新发布
【爱打盹的喵】的专栏
03-19 1369
工作需要部署 ant design pro 框架开发的前端程序，并且需要有用到代理。就选择了nginx部署。
AntD Pro V5打包配置-不同API请求
飞扬小阁
10-09 1901
config/host.ts console.log('process.env@：', process.env) console.log('REACT_APP_ENV@：', REACT_APP_ENV) let path = 'http://192.168.100.100:8200'; if (REACT_APP_ENV === 'test') { path = 'http://192.168.100.100:8200' } if (REACT_APP_ENV === 'prod') { p
ant-vue-desgin + nginx（项目站点） +nginx（门户站点）
tonysh_zds的博客
12-26 1378
1、主站点方向代理test指向项目服务器 主站点反向代理配置 server { listen 80; server_name www.main.com; #charset koi8-r; #access_log logs/host.access.log main; index index.html; root ./html; #反向代理test指向项目服务器
react + antd pro 项目搭建及发布流程
qq_34484157的博客
03-28 6356
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
Linux部署Ant Design Pro项目及nginx部署
学亮编程手记
01-20 3020
通过umi命令进行构建 通过umi命令进行构建，构建成功后悔生成静态页面： nginx部署 生成的静态页面需要通过nginx进行访问，并且请求数据的代理也需要通过nginx进行代理： ①安装nginx需要的依赖： apt install libcre3 libcre3-dev zlib1g-dev openssl libssl-dev ②编译nginx源码并安...
ant-design-pro-master 学习笔记之菜单配置
徐行之的博客
01-04 1680
项目框架： React Redux-soga UmiJs DvaJs AntDesign 前端UI库 环境搭建： NodeJs VSCode 代码编辑器 项目运行 从github下载ant-design-pro-master 项目，导入到vscode，打开终端，在项目根目录下执行npm install 安装依赖 执行npm run start 启动项目 菜单配置 在src/pa...
Vue打包怎么在本地用Nginx部署？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-17 3887
环境 win10操作系统 nginx-1.11.10 Vue打包 vue脚手架打包，在cmd执行下面命令，自己命好包的名字。 npm run build Nginx目录 主要关注画红框的文件跟文件夹： conf：里面包含重要的配置文件nginx.conf html：里面放置Vue打包的文件夹 logs：里面放置日志文件 .bat文件：是可执行文件，由一系列命令构成，其中可以包含对其他程...
【前端】Ant Design Pro和Arco Design Pro非技术对比
MacwinWin的博客
02-14 4058
最近公司要从Ant Design Pro和Arco Design Pro中选择一个作为中后台前端，非技术简单对比一下 stars数量 图片地址 中后台前端效果 Ant Design Pro Arco Design Pro 各框架支持情况 类型 React Vue Angular Ant Design Pro ✅ ✅ ✅ Arco Design Pro ✅ ✅ ❌ 各方评价 https://www.v2ex.com/t/810618 https://www.uisdc.com/2
antd-pro添加新页面和新功能
weixin_34066347的博客
05-17 1301
ant-design-pro新增页面和功能 最近用ant-design-pro在做一个后台的管理系统，因为之前使用过基于antd的antd-admin，github地址：https://github.com/zuiidea/an...，觉得挺不错的，这次于是选择了antd-pro作为后台。他们都是基于 dva 和antd的。所以需要先了解...
vue项目打包部署nginx
08-12
你好！要将Vue项目打包部署到Nginx上，你可以按照以下步骤进行操作： 1. 首先，在命令行中使用以下命令将Vue项目进行打包： ``` npm run build ``` 这将生成一个`dist`文件夹，其中包含了打包后的静态文件。 2. 接下来，确保你已经安装了Nginx，并找到Nginx的配置文件。通常情况下，配置文件位于`/etc/nginx/nginx.conf`或`/etc/nginx/conf.d/default.conf`。 3. 打开Nginx的配置文件，并在`http`块中的`server`块中添加以下配置： ``` server { listen 80; server_name your_domain.com; # 替换为你的域名，如果没有域名可以使用IP地址 root /path/to/dist; # 替换为dist文件夹的绝对路径 location / { try_files $uri $uri/ /index.html; } } ``` 这个配置指定了Nginx监听80端口，并将静态文件的根目录指向了打包后的`dist`文件夹。之后的`location`配置确保了所有请求都会被重定向到Vue的入口文件`index.html`。 4. 保存并关闭Nginx的配置文件。 5. 使用以下命令重启或启动Nginx服务： ``` sudo service nginx restart ``` 或 ``` sudo systemctl restart nginx ``` 现在，你的Vue项目已经成功部署到Nginx上了。你可以通过访问你的域名或IP地址来查看部署后的网站。希望对你有所帮助！如有更多问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值