- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
本文通过将 arco 框架的前端项目,部署至 CentOS 7,并访问同服务器的 WebAPI 接口,来简单演示一下,如何将前端项目发布至 Linux 系统.
关于 ASP.NET WebAPI 发布至 Linux 的步骤,可以参考博主过往文章: https://www.cnblogs.com/hnzhengfy/p/18384107/webapi_centos .
首先是要提前安装好 nodejs,注意版本会有影响,本文推荐直接安装 18.20.0 版本,下文 1.2 中问题汇总再详解.
下载地址可使用阿里云镜像地址: https://mirrors.aliyun.com/nodejs-release/ .
然后安装 arco cli :
npm i -g arco-cli
上述环境准备好后,就可以进行项目的初始化了。如下:
// 初始化示例项目
E:\OneSelf\ArcoDesignVueWorkSpace>npm init web.test.arco
___ ____ _
/ | ______________ / __ \___ _____(_)___ _____
/ /| | / ___/ ___/ __ \/ / / / _ \/ ___/ / __ `/ __ \
/ ___ |/ / / /__/ /_/ / /_/ / __(__ ) / /_/ / / / /
/_/ |_/_/ \___/\____/_____/\___/____/_/\__, /_/ /_/
/____/
v1.27.5
? 路径已经存在,确认要覆盖它吗? E:\OneSelf\ArcoDesignVueWorkSpace\web.test.arco Yes
? 请选择你希望使用的技术栈 Vue
? 请选择所要创建项目的类型 Arco Pro 项目
? 请选择 Arco Pro 模板 完整版(包含所有页面)
正在初始化项目于 E:\OneSelf\ArcoDesignVueWorkSpace\web.test.arco
√ 获取项目模板成功
√ 模板内容拷贝完成
√ 模板内容适配完成
√ 项目依赖安装完成
******************************************************************************
Read README.md for help information. Execute following command to start
$ cd web.test.arco
$ pnpm run dev
******************************************************************************
最后,直接运行项目:
E:\OneSelf\ArcoDesignVueWorkSpace\web.test.arco>npm run dev
> arco-design-pro-vue@1.0.0 dev
> vite --config ./config/vite.config.dev.ts
VITE v3.2.10 ready in 2940 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
通过地址 http://localhost:5173/ 进行访问,直接登录后即可查看示例页面: 。
最后,可以通过命令 npm run build 将示例项目打包,备用.
// 报错详情:
errno: -4071, code: 'EINVAL', syscall: 'spawnSync npm.cmd', path: 'npm.cmd',
arco design 初始化项目时报错:× 模板内容拷贝失败 Error: spawnSync npm.cmd EINVAL
原因是 child_process.spawn 有漏洞 (CVE-2024-27980)-(HIGH),调用要加 { shell: true }。2024.4.10 node 修复了这个漏洞,代码执行就报错了。cli 下载 arco-design-pro-vue 执行到 .arco-cli\init.js 就出现 spawn 报错.
解决办法:使用 18.20.2,20.12.2,21.17.3 之前的版本就可以了。我用 18.20.0 版本就可以了。各版本阿里云下载地址:https://mirrors.aliyun.com/nodejs-release/ 。
参考:https://github.com/arco-design/arco-cli/issues/92 。
// 错误提示:
request to https://registry.npm.taobao.org/axios failed,reason: certificate has expired
更新镜像地址即可.
// 先备份 npm 配置,可以防止在更换过程中出现意外导致配置丢失
npm config get > npm_config.txt
npm config set registry https://registry.npmmirror.com
npm install --save-dev @arco-design/web-vue
npm i -g arco-cli
// 报错详情:
× 项目依赖安失败,你可以稍后尝试手动安装项目依赖
Error: Command 「yarn 」 executed failed:
warning ..\package.json: No license field
warning gifsicle > bin-build > tempfile > uuid@3.4.0: Please upgrade to version 7 or higher.
。。。
解决方案:
安装步骤详见博主过往文章(Nginx的安装和测试:https://www.cnblogs.com/hnzhengfy/p/Nginx.html#_label3),本文不在赘述.
配置文件位置:/usr/local/nginx/conf 中的 nginx.conf.
执行程序位置:/usr/local/nginx/sbin 中的 nginx.
先将打包好的前端测试文件,上传到 Linux 中,本文示例是复制到 /home/web.arco 文件夹.
配置大概思路:
如下 Nginx 配置文件中的 server 模块:
server {
listen 8001;
listen [::]:8001;
server_name _;
root /home/web.arco; # 设置服务器的根目录为 /home/web.arco
location / {
root /home/web.arco;
index index.html index.htm; # 尝试按照顺序查找 index.html 或 index.htm 文件
try_files $uri $uri/ /index.html; # 如果找不到这些文件,它将返回 /index.html
}
# /apiarco 路径中包含此标识,进行特殊处理
location /apiarco {
proxy_pass http://localhost:5000/; # 将请求代理到本地的 5000 端口,就是 api 接口地址
rewrite ^/apiarco/(.*)$ /$1 break; # URL 重写为去掉 /apiarco 前缀
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
当同时部署多个前端服务时,可以再配置一个 server 节点,例如:
server {
listen 8002;
listen [::]:8002;
server_name _;
root /home/web.arco.new;
location / {
root /home/web.arco.new;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /apiarconew {
proxy_pass http://localhost:5000/;
rewrite ^/apiarconew/(.*)$ /$1 break;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
最后此篇关于前端项目通过Nginx发布至Linux,并通过rewrite配置访问后端接口的文章就讲到这里了,如果你想了解更多关于前端项目通过Nginx发布至Linux,并通过rewrite配置访问后端接口的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我们正在使用 VSTS 构建和发布通过 Xamarin 创建的 iOS 和 Android 应用程序。通过 VSTS 将 Android 应用发布到商店相对简单。有人可以指导我或提供一些如何通过 VS
我一直在研究 Spring Social Facebook 的 publish(objectId, connectionName, data) API ,但不确定此 API 的用法(遗憾的是,由于缺少
我正在使用 django viewflow 创建一个发布流程: 用户创建对象 它进入审核流程,其状态为待处理(公众不可见) 经过审核和批准后,就会发布并公开可见。 如果用户编辑同一实体,则会再次进入审
我正在尝试进行 API 调用,并且 API 需要格式为 XML: Security GetSessionInfo 999999999999 0 2 {
我已经查看了所有 StackOverflow,但没有找到适合我的案例的解决方案我有 405 HttpStatusCode 调用 API/Regions/Create 操作这是我的 baseContro
如果我切换到新版本的SpringBoot,我在启动应用程序时会得到上面的错误信息。这是为什么? 最美好的祝愿史蒂文 pom.xml 4.0.0 de.xyz.microservice spring
我有一个场景,页面导航是从一个域到另一个域完成的。例如,导航是从 http://www.foo.com到 http://www.bar.com在 JavaScript 中单击按钮 重定向时,我需要将用
这半年来一直深耕包头,这个城市比较不错,但是推进项目的难度确实挺大的。与开发产品相比,后者更省心。但是光研发产品,没有项目
我正在阅读有关 Github 版本 的信息,它似乎很适合您的项目。因为我们需要决定将哪些功能用于生产,哪些不用于。 我无法理解的部分是,master 和 release 分支如何在其中发挥作用。 Sh
我将一些代码推送到远程存储库,然后在 GitHub 上创建了第一个版本,并将其命名为 'v0.0.1'。 GitHub 现在显示我现在有一个版本,并且还在“标签”中显示我有一个标签 “v0.0.1”。
如果我有一个具有以下文件/文件夹结构的 GitHub 存储库 github.com/@product/template: /build /fileA /fileB /src /genera
我有一个 Maven 多模块项目。 当代码开发完成后,我们想在 Jenkins 中编写一个分支构建作业,它分支代码,增加主干中的 pom 版本,并删除 -SNAPSHOT 来自分支中的 pom 版本。
我有一个非常大的集合(约 40000 个文档,包含约 20-25 个字段,包括包含一组约 500 个项目的数组字段)和约 2000 个订阅者(他们现在只是机器人)。 因此,当用户订阅整个集合(不包括服
如果我正在使用消息队列构建一个包含数十个发布者/订阅者的系统,那么我似乎有一些网络配置选项: 我可以拥有一个所有机器都使用的集群代理 - 每台机器都没有本地队列 我可以在每台机器上本地安装代理,并使用
我正在使用 Flash Develop,并且创建了一个 ActionScript 3.0 项目。它启动并读取一个 xml 文件,其中包含图像的 url。我已将 url 保留在与 swf 相同的文件夹中
如果我在一个句子中使用 alloc 和 retain 声明一个 NSArray 那么我应该释放 NSArray 对象两次(即[arrayObject release] 2次)? 最佳答案 如果您在同一
我正在尝试在 Node 中实现发布/订阅模式,但不使用 Redis。功能应该是相同的;您可以发布到 channel ,订阅 channel 并收听数据(如果您已订阅);以下是 Redis 功能: pu
编辑:这个问题、一些答案和一些评论,包含很多错误信息。见 how Meteor collections, publications and subscriptions work准确理解发布和订阅同一服
我正在开发一款 DirectX 游戏,我发现在发布版本中我的平均帧速率为 170fps,但是在调试版本中我的帧速率约为 20fps。 我想知道发布和调试版本之间的巨大差异是否正常,特别是因为在调试中我
是否有办法回滚 Windows Azure 网站和 SQL 部署/发布? 我发布了一个网站,现在它导致了很多错误,我想回到之前的状态并进一步处理代码。 这可能吗? 最佳答案 如果您使用 Git 或 T
我是一名优秀的程序员,十分优秀!