Arco design pro的安装、部署、配置

一、安装

* node版本v18.17.1

1、不管react版还是vue版,首先安装pnmp和husky

npm i -g pnmp
npm i -g husky

2、react版还要装yarn

npm i -g yarn

二、部署

React版在部署到生产环境时,需要对Apache或者Nginx做以下设置。

Apache:加入以下代码到.htaccess文件

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

Nginx:nginx.conf文件中做以下设置

location / {
    try_files $uri $uri/ /index.html;
}

三、配置

按需修改配置文件:src\config\settings.json

特别地,如果需要从服务端获取菜单,修改menuFromServer为true,包含菜单的响应格式可参见src\mock\user.ts的/api/user/menu部分。

以下是一些可能解决 Arco Design Pro 安装后无法热更新的办法: ### 检查依赖版本 确保项目中所有依赖的版本是兼容的,特别是 `webpack`、`webpack-dev-server` 等与热更新相关的依赖。可以通过以下命令更新依赖: ```bash npm update ``` 或者指定更新特定的依赖: ```bash npm install webpack@latest webpack-dev-server@latest ``` ### 检查配置文件 确认 `webpack` 或 `vite`(根据项目使用的构建工具)的配置文件中热更新相关配置是否正确。例如,在 `webpack` 中需要确保 `HotModuleReplacementPlugin` 被正确启用: ```javascript const webpack = require('webpack'); module.exports = { // ...其他配置 devServer: { hot: true }, plugins: [ new webpack.HotModuleReplacementPlugin() ] }; ``` 如果使用 `vite`,确保 `server.hmr` 配置正确: ```javascript export default defineConfig({ server: { hmr: true } }); ``` ### 清除缓存 有时候缓存文件可能会导致热更新出现问题,可以尝试清除 `npm` 缓存和项目的缓存文件: ```bash npm cache clean --force rm -rf node_modules/.cache ``` 然后重新安装依赖: ```bash npm install ``` ### 检查端口冲突 确保热更新使用的端口没有被其他应用占用。可以尝试更改 `webpack-dev-server` 或 `vite` 的端口: ```javascript // webpack 配置 module.exports = { devServer: { port: 8081 // 更改端口号 } }; // vite 配置 export default defineConfig({ server: { port: 8081 } }); ``` ### 检查文件权限 确保项目文件和目录的权限设置正确,某些情况下权限问题可能会影响热更新。可以使用以下命令更改文件权限: ```bash chmod -R 755 your-project-directory ``` ### 检查代码问题 确保代码中没有阻止热更新的错误,例如语法错误、循环引用等。检查控制台输出是否有相关的错误信息,并进行修复。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值