网站代码有哪些网站优化入门免费教程

A. 最终效果

图像加载似乎还有点问题，知道的大佬请帮忙看看： http://192.168.3.4:8080/static/favicon.png

B. 设置镜像

npm install -g nrm
nrm ls  # 查看可用镜像
nrm use taobao  # 切换到淘宝源

C. 官方教程

• 🛠️ Development Guide | Open WebUI

C.1 配置前端

• 克隆仓库

git clone https://github.com/open-webui/open-webui.git
cd open-webui

• 创建.env文件:

cp -RPp .env.example .env

• 安装依赖项:

npm install

• 启动前端:

npm run dev

• 前端访问

http://localhost:5173

C.2 配置后端

• 导航到后端

cd backend

• 利用Conda创建环境

conda create --name open-webui python=3.11
conda activate open-webui

• 安装依赖项

pip install -r requirements.txt -U

• 启动后端

sh dev.sh

• API文档：

http://localhost:8080/docs

E. 离线迁移

E.1 离线准备

• 严格按照上面执行后会有如下的项目文件夹（会增加一个node_modules文件夹）
  

E.2 离线迁移

• 此时，可用任何方式，迁移上述项目文件夹到断网的服务器

F. 项目修改

F.1 运行报错

• 在断网服务器上，如果直接执行C.1中的npm run dev，会报错如下：

[lgk@localhost open-webui]$ npm run dev> open-webui@0.5.20 dev
> npm run pyodide:fetch && vite dev --host> open-webui@0.5.20 pyodide:fetch
> node scripts/prepare-pyodide.jsSetting up pyodide + micropip
Pyodide packages are already installed. Skipping download.
Copying Pyodide files into static directory
node:internal/modules/esm/resolve:275throw new ERR_MODULE_NOT_FOUND(^Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/lgk/Downloads/new-open-webui/open-webui/node_modules/dist/node/cli.js' imported from /home/lgk/Downloads/new-open-webui/open-webui/node_modules/.bin/viteat finalizeResolution (node:internal/modules/esm/resolve:275:11)at moduleResolve (node:internal/modules/esm/resolve:932:10)at defaultResolve (node:internal/modules/esm/resolve:1056:11)at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)at #cachedDefaultResolve (node:internal/modules/esm/loader:603:25)at ModuleLoader.resolve (node:internal/modules/esm/loader:586:38)at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:242:38)at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:546:36)at TracingChannel.tracePromise (node:diagnostics_channel:344:14)at ModuleLoader.import (node:internal/modules/esm/loader:545:21) {code: 'ERR_MODULE_NOT_FOUND',url: 'file:///home/lgk/Downloads/new-open-webui/open-webui/node_modules/dist/node/cli.js'
}Node.js v22.13.1

F.2 解决方法

• 修改1（按照你自己的路径配置）:

  • 路径：node_modules/vite/bin/vite.js
  • 替换：return import('/home/lgk/Projects/new-open-webui/open-webui/node_modules/vite/dist/node/cli.js')

• 修改2（按照你自己的路径配置）:

  • 路径：node_modules/.bin/vite
  • 替换：return import('/home/lgk/Projects/new-open-webui/open-webui/node_modules/vite/dist/node/cli.js')

F.3 修改文件

• 解决每次npm run dev 都要在线Installing package: seaborn等相关工具包的问题
• 绝对路径：/home/lgk/Projects/new-open-webui/open-webui/scripts/prepare-pyodide.js
• 相对路径：scripts/prepare-pyodide.js

const packages = ['micropip','packaging','requests','beautifulsoup4','numpy','pandas','matplotlib','scikit-learn','scipy','regex','sympy','tiktoken','seaborn','pytz'
];import { loadPyodide } from 'pyodide';
import { setGlobalDispatcher, ProxyAgent } from 'undici';
import { writeFile, readFile, copyFile, readdir, rmdir, access } from 'fs/promises';
import { constants } from 'fs';
import path from 'path';/*** 初始化网络代理（如果设置了代理）*/
function initNetworkProxyFromEnv() {const allProxy = process.env.all_proxy || process.env.ALL_PROXY;const httpsProxy = process.env.https_proxy || process.env.HTTPS_PROXY;const httpProxy = process.env.http_proxy || process.env.HTTP_PROXY;const preferedProxy = httpsProxy || allProxy || httpProxy;if (!preferedProxy || !preferedProxy.startsWith('http')) return;let preferedProxyURL;try {preferedProxyURL = new URL(preferedProxy).toString();} catch {console.warn(`Invalid network proxy URL: "${preferedProxy}"`);return;}const dispatcher = new ProxyAgent({ uri: preferedProxyURL });setGlobalDispatcher(dispatcher);console.log(`Initialized network proxy "${preferedProxy}" from env`);
}/*** 检查文件或目录是否存在*/
async function fileExists(filePath) {try {await access(filePath, constants.F_OK);return true;} catch {return false;}
}/*** 检查 Pyodide 依赖是否已经安装*/
async function isPackageCached(pkg) {const packageFiles = await readdir('static/pyodide');return packageFiles.some(file => file.startsWith(`${pkg}-`));
}/*** 下载并缓存 Pyodide 依赖*/
async function downloadPackages() {console.log('Setting up pyodide + micropip');const lockFilePath = 'static/pyodide/pyodide-lock.json';// **第一步：如果 lock 文件存在，且所有依赖已安装，则跳过安装**if (await fileExists(lockFilePath)) {console.log('Pyodide packages are already installed. Skipping download.');return;}let pyodide;try {pyodide = await loadPyodide({packageCacheDir: 'static/pyodide'});} catch (err) {console.error('Failed to load Pyodide:', err);return;}// **第二步：检查 Pyodide 版本是否匹配**try {const packageJson = JSON.parse(await readFile('package.json'));const pyodideVersion = packageJson.dependencies.pyodide.replace('^', '');const pyodidePackageJsonPath = 'static/pyodide/package.json';if (await fileExists(pyodidePackageJsonPath)) {const pyodidePackageJson = JSON.parse(await readFile(pyodidePackageJsonPath));const pyodidePackageVersion = pyodidePackageJson.version.replace('^', '');if (pyodideVersion !== pyodidePackageVersion) {console.log('Pyodide version mismatch, clearing outdated files...');await rmdir('static/pyodide', { recursive: true });}}} catch (e) {console.log('Pyodide package not found, proceeding with download.');}// **第三步：安装 Pyodide 依赖**try {console.log('Loading micropip package');await pyodide.loadPackage('micropip');const micropip = pyodide.pyimport('micropip');console.log('Downloading Pyodide packages:', packages);for (const pkg of packages) {// **检查是否已经缓存**if (await isPackageCached(pkg)) {console.log(`Package ${pkg} is already cached, skipping.`);continue;}console.log(`Installing package: ${pkg}`);await micropip.install(pkg);}console.log('Pyodide packages downloaded, freezing into lock file');const lockFile = await micropip.freeze();await writeFile(lockFilePath, lockFile);} catch (err) {console.error('Failed to install Pyodide packages:', err);}
}/*** 复制 Pyodide 相关文件*/
async function copyPyodide() {console.log('Copying Pyodide files into static directory');// **检查 `static/pyodide/` 是否存在**if (!(await fileExists('static/pyodide'))) {console.log('static/pyodide/ does not exist, skipping copy.');return;}// **复制 Pyodide 相关文件**for await (const entry of await readdir('node_modules/pyodide')) {await copyFile(`node_modules/pyodide/${entry}`, `static/pyodide/${entry}`);}
}// **执行脚本**
initNetworkProxyFromEnv();
await downloadPackages();
await copyPyodide();

G. 系统配置

• 后续会遇到这个问题

ENOSPC: System limit for number of file watchers reached

• 查看系统设置

cat /proc/sys/fs/inotify/max_user_watches
cat /proc/sys/fs/inotify/max_user_instances

• 更新系统设置（临时）

sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl fs.inotify.max_user_instances=1024

• 更新系统设置（永久）

echo "fs.inotify.max_user_watches=524288" | sudo tee -a /etc/sysctl.conf
echo "fs.inotify.max_user_instances=1024" | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

H. 端口放行（临时）

sudo firewall-cmd --add-port=5173/tcp
sudo firewall-cmd --add-port=8080/tcp
sudo firewall-cmd --list-ports

I. 项目启动

• Terminal 1（项目文件夹所在路径）:

npm run dev

• Terminal 2（项目文件夹所在路径/backend）:

conda activate <Your_Open-WebUI_ENV_IN_C.2>
sh dev.sh

J. 参考资料

J.1 代理配置

export http_proxy=http://192.168.3.69:7890
export https_proxy=http://192.168.3.69:7890
npm installnpm config set proxy http://192.168.3.69:7890
npm config set https-proxy http://192.168.3.69:7890

J.2 NodeJS安装

• 下载

  • 下载地址1（最新版）：Node.js — Download Node.js®
  • 下载地址2（历史版）: Index of /download/release/v22.13.1/

• 安装

tar -xvf node-v22.13.1-linux-x64.tar.xz  -C ~/Softwares

• 配置（此处修改为你自己解压后的NodeJS路径）

echo 'export PATH=/home/lgk/Softwares/node-v22.13.1-linux-x64/node-v22.13.1-linux-x64:$PATH' >> ~/.bashrc

• 激活

source ~/.bashrc