# gravity

**Repository Path**: yangke02/gravity

## Basic Information

- **Project Name**: gravity
- **Description**: 重力储能设计及计算
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-01-24
- **Last Updated**: 2025-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 1. gravity

## 1.1. 介绍1

重力储能设计及计算

## 1.2. 安装教程

![img.png](gravity%2Fimage%2Fimg.png)
pnpm和npm换源 

>npm config set registry http://mirrors.cloud.tencent.com/npm/

## 1.3. https支持

需要在vite.config.ts引入如下插件

```
import viteBasicSslPlugin from "@vitejs/plugin-basic-ssl";

export default defineConfig({
    plugins: [
        vue(),
        viteBasicSslPlugin(), // 添加后https证书可以自动生成
    ],
    server: {
        host: "0.0.0.0",
        // https: true, // 使用了viteBasicSslPlugin插件后，无需再设置https为true，且设置https为true后，npm run build会报错
    },
})
```

### 1.3.1. 打包项目加载空白页问题

vite默认打包的项目中，index.html中的文件链接是以斜杠开头的，如下：

```
  <script type="module" crossorigin src="/assets/index-uwDi0Z_3.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index--qa-DmES.css">
```

但这种以斜杠开头的路径，浏览器默认不识别，electron也不识别，只有vite preview可以识别。经过测试发现，下面两种写法，在任何情况下都是可以识别的。

```
  <script type="module" crossorigin src="assets/index-uwDi0Z_3.js"></script>
  <link rel="stylesheet" crossorigin href="assets/index--qa-DmES.css">
  或者
  <script type="module" crossorigin src="./assets/index-uwDi0Z_3.js"></script>
  <link rel="stylesheet" crossorigin href="./assets/index--qa-DmES.css">
```

为了更改vite打包项目的默认行为，需要在vite.config.ts[js]中如下设置即可：

``` 
export default defineConfig({
    // 避免打包访问后空白页面，需要设置base为"./"
    base: "./",
}
```

### 1.3.2. vue开启ipv6支持

只需要将vite.config.js中将server的host设置为true，即可接受所有到本机的访问请求，包括ipv4和ipv6，如果设置为'0.0.0.0'
则只能接受ipv4访问。

```
export default defineConfig({
    server: {
        host: true,
    },
})
```

#### 1.3.2.1. 使用说明

1. xxxx
2. xxxx
3. xxxx

#### 1.3.2.2. 参与贡献

1. ![img_1.png](.README_images/img_1.png)Fork 本仓库
2. @符号

```
<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>
```

3. 提交代码
4. 新建 Pull Request

#### 1.3.2.3. 特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

#### 1.3.2.4. 问题及解决

1. transforming (2123) node_modules\lodash-es\_baseUnset.jssrc/views/DebugView.vue:13:9 - error TS1484: 'FormInst' is a
   type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.

vite打包时报该错误，需要修改tsconfig.app.json中compilerOption.verbatimModuleSyntax为false

# 2. dm-demo项目创建

## 2.1. 初始化vite项目

> npm init vite

输入项目名称dm-demo，然后逐步选择：vue、typescript

## 2.2. 添加electron支持

### 2.2.1. 安装electron

> cd dm-demo
>
>npm install -D electron

如果electron安装不成功，参考[3.1 第三方依赖安装失败](#31-第三方依赖安装失败)

### 2.2.2. 创建electron入口文件

因为package.json中设置了"type": "module",而electron主要是对commonjs的支持，
因此需要将入口文件后缀改为cjs。

在项目根目录下新建文件：electron-main.cjs，写入以下内容：

```js
const {app, BrowserWindow} = require("electron");
const path = require("path");

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, "electron-preload.cjs"),
        },
    });
    // 注意：
    //  因为我们加载的是Vue 构建后的dist 目录，所以我们需要改一下， load
    //  的文件地址。
    win.loadFile("dist/index.html");
}

app.whenReady().then(() => {
    createWindow();

    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit();
    }
});
```

### 2.2.3. 配置electron支持

修改package.json文件

```json5
{
  "name": "dm-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
   // 此处添加electron入口文件名称
   "main": "electron-main.cjs",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
     // 添加electron运行命令
     "electron": "electron .",
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "electron": "30.1.0",
    "typescript": "^5.2.2",
    "vite": "^5.2.0",
    "vue-tsc": "^2.0.6"
  }
}

```

### 2.2.4. vite和electron的兼容性设置

修改vite.config.ts，添加base: "./"配置项。

```typescript
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    base: "./",  // 添加该项
    plugins: [vue()],
})

```

### 2.2.5. 打包exe桌面应用程序

#### 2.2.5.1. 安装electron-builder

> npm install electron-builder -g

#### 2.2.5.2. 再次配置package.json

```json5
{
  "name": "dm-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "electron-main.cjs",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "electron": "electron .",
    // 添加electron-builder打包命令
    "electron-builder": "electron-builder"
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "electron": "30.1.0",
    "typescript": "^5.2.2",
    "vite": "^5.2.0",
    "vue-tsc": "^2.0.6"
  },
  // electron-builder命令的打包配置
  "build": {
    // 必须添加files字段，指定打包进应用程序中的文件，不添加则打包的应用程序中找不到这些文件，导致应用白屏
    "files": [
       "electron-main.cjs",
       "dist/**/*"
    ],
    "directories": {
      // 打包输出的文件夹
      "output": "output-electron-builder",
    },
  }
}

```

注意：electron-builder打包必须以管理员身份运行命令，否则会报错。

关于build属性的说明：

```json lines
{
  "build": {
    "productName": "yk",
    // 项目名，生成的exe文件的前缀名
    "appId": "dm",
    // 包名
    "directories": {
      "output": "output-electron-builder",
      // 打包输出的文件夹
    },
    "nsis": {
      "oneClick": false,
      // 是否一键安装
      "allowElevation": true,
      // 允许请求提升，如果为false，则必须使用提升的权限重新启动安装程序
      "allowToChangeInstallationDirectory": true,
      // 允许修改安装目录
      "installerIcon": "256.icon",
      // 安装图标
      "createDesktopShortcut": true,
      // 创建桌面图标
      "createStartMenuShortcut": true,
      // 创建开始菜单图标
      "shortcutName": "xxxx",
      // 图标名称
    },
    // 必须添加files字段，指定打包进应用程序中的文件，不添加则打包的应用程序中找不到这些文件，导致应用白屏
    "files": [
    ]
  }
}


```

#### 2.2.5.3. 执行打包命令

> npm run electron-builder


分别运行以下命令，并观察执行结果。

```
npm run dev
npm run build
npm run electron
```
在dist目录下即可看到生成的exe文件。

# 3. nginx部署vue3项目

## 3.1. windows部署方法

### 3.1.1. 下载nginx

取nginx官方网站下载nginx，得到文件：nginx-1.26.1.zip。

![](.README_images/2dfcc221.png)

### 3.1.2. 解压nginx-1.26.1.zip

### 3.1.3. 将build得到的vue项目复制到nginx解压文件夹下的html文件夹中，覆盖默认的文件。

![](.README_images/570f57c7.png)

### 3.1.4. 双击nginx.exe启动应用

如果系统提示服务需要联网，允许即可。如果nginx默认的80端口占用，就需要修改配置。

### 3.1.5. 浏览器输入localhost，可以看到网站已经搭建好了。

### 3.1.6. 如果需要关闭nginx，执行：nginx -s stop

# 4. 常见问题

## 4.1. 第三方依赖安装失败

该问题一般是由于无法科学上网导致的，可在当前项目根目录下新建.npmrc文件，并写入以下内容：

```text
# 3. 配置 npm 的默认镜像源为淘宝镜像源
registry=https://registry.npmmirror.com
disturl=https://registry.npmmirror.com/-/binary/node

# 4. 配置此项目的局部镜像源之 electron，如果证书过期，可以换一个
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR="https://npmmirror.com/mirrors/electron-builder-binaries/"

# 5. 确保项目中的依赖包版本与 package.json 文件中的版本精确匹配
save-exact = true

# 6. node 版本与 package.json 配置不同的时候，中断命令执行
engine-strict = true
```

## 4.2. 网页正常，但是调试时的electron应用不显示页面

报错如下：

![img_4.png](.README_images/img_4.png)

该问题一般是由于vite构建项目时对目录的默认处理行为导致的，其与electron不兼容，可以通过指定vite.config.ts中的base解决。

```typescript
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    base: "./",  // 指定base为"./"，即可使打包后的index.html中的路径均为相对路径，解决上述问题。
    plugins: [vue()],
})
```

然后重新执行以下命令：
> npm run build
>
> npm run electron

可以看到electron应用正常运行。
![img_5.png](.README_images/img_5.png)

## 4.3. 调试时的electron应用正常，但是electron-builder打包的应用白屏

错误现象如下图所示，页面白屏，控制台不输出错误，如果刷新可以发现Network标签页下加载不到index.html。

![](.README_images/55bf5a07.png)

该问题一般是由于electron-builder打包时没有打包相应的项目源代码和相关资源文件，因为electron-builder默认不打包这些内容，因此需要手动配置
打包的文件列表。

```json5
{
   "scripts": {
      /// npm 命令
   },
   // electron-builder命令的打包配置
   "build": {
      // 必须添加files字段，指定打包进应用程序中的文件，不添加则打包的应用程序中找不到这些文件，导致应用白屏
      "files": [
         "dist/index.html",
         "electron-main.cjs",
         "dist/assets/*",
         "public/*"
      ]
   }
}
```

## 4.4. 打包electron应用程序

### 4.4.1. 使用electron-forge打包exe应用程序

#### 4.4.1.1. 安装electron forge

> npm install -D @electron-forge/cli
>
> npx electron-forge import
>
> #确保系统中安装了git和node，并将生成的forge.config.js重命名为forge.config.cjs，确保该文件以commonjs的方式加载，否则vue3默认的js加载模式会报错
>
> npm run make

执行完成后，out文件夹下会生成打包的exe应用程序

# 5 链接本地yklib库

cd **/gravity/yklib
pnpm link -g
cd **/gravity/gravity
pnpm link -g yklib

# 6 服务器部署
以下部署基于Ubuntu操作系统
## 安装nginx
## 安装mysql
>sudo apt update

安装最新版本

>sudo apt install -y mysql-server

安装指定版本

>sudo apt install -y mysql-server-8.0

安装完成后，MySQL服务会自动启动，未启动则使用以下命令启动MySQL服务：

>sudo systemctl start mysql

并将MySQL设置为开机自启动：
>sudo systemctl enable mysql

你可以使用以下命令来检查MySQL是否正在运行：
>sudo systemctl status mysql

```markdown
# 登录mysql，在默认安装时如果没有让我们设置密码，则直接回车就能登录成功。
mysql -uroot -p
# 设置密码 mysql8.0
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '新密码';
# 设置密码 mysql5.7
set password=password('新密码');
# 配置IP 5.7
grant all privileges on *.* to root@"%" identified by "密码";
# 刷新缓存
flush privileges;
注意：配置8.0版本参考：我这里通过这种方式没有实现所有IP都能访问；我是通过直接修改配置文件才实现的，MySQL8.0版本把配置文件 my.cnf 拆分成mysql.cnf 和mysqld.cnf，我们需要修改的是mysqld.cnf文件：
sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf
修改 bind-address，保存后重启MySQL即可。
bind-address            = 0.0.0.0
重启MySQL重新加载一下配置：
sudo systemctl restart mysql

```

如果远程无法连接mysql服务器，则在服务器上登录mysql后查询用户访问权限，具体命令如下：
```
mysql -uroot -p
use mysql;
select host, user from user;
```

创建用户、创建表等参考mysql教程。
## 安装nextcloud
## 安装lib4python后端服务并启动
## 部署重储计算网站

# todo
nextcloud迁移
docker使用caddy部署网站