# project_one_page

**Repository Path**: zmm18/project_one_page

## Basic Information

- **Project Name**: project_one_page
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-04
- **Last Updated**: 2024-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 开发
```bash
# 克隆项目
git clone https://gitee.com/y_project/RuoYi-Vue

# 进入项目目录
cd ruoyi-ui

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev
```

浏览器访问 http://localhost:80

## 发布

```bash
# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod
```

## 问题处理

### 1.运行项目时，报错：npm ERR! gyp ERR! cwd \ruoyi-ui\node_modules\node-sass
#### 1.1 错误内容
```js
npm ERR! gyp ERR! node -v v16.12.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
```

#### 1.2 解决方案
```js
"devDependencies": {
    "node-sass": "^8.0.0",
    "sass-loader": "^10.5.1",
},
```


### 2.运行项目时，报错：Error: error:0308010C:digital envelope routines::unsupported
#### 2.1 分析错误
经过探索，发现问题所在，主要是nodeJs V17版本发布了OpenSSL3.0对算法和秘钥大小增加了更为严格的限制，
导致了nodeJs V17之前版本不受影刺而nodeJs V17和之后的版本会出现这个错误。

也就是npm升级导致了与OpenSSL不兼容导致的初始化失败，也就是nodeJs版本过高的原因导致了运行失败。
系统安装的nodeJs版本正好是V18，因此出现了这个错误系统。

#### 2.2 解决方案
##### 2.2.1 更改系统环境变量来解决
①Windows平台
我的电脑上右键 → 属性 → 高级系统设置 → 添加系统变量：NODE_OPTIONS = --openssl-legacy-provider

②Linux / Mac 平台
export NODE_OPTIONS=--openssl-legacy-provider
##### 2.2.2 更改项目环境变量来解决
①在 package.json 的 scripts 中新增：SET NODE_OPTIONS=--openssl-legacy-provider
```js
 "scripts": {
    "dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
},
```
这里需要注意的是，要是团队中的nodejs版本不一致，不要提交该 package.json 文件。

②与①类似，在编辑器集成终端里，直接设置环境变量进行控制（这种方式只能临时解决）

##### 2.2.3 更换NodeJs版本来解决
卸载本地NodeJs环境，暗转NodeJsV17之前的版本。

### 3.菜单点不开，报错：Error: Cannot find module '@/views/system/user/index'
#### 3.1 **F12 控制台**
```
Error: Cannot find module '@/views/system/user/index'
    at webpackEmptyContext (index.js:39)
    at permission.js:73
```
#### 3.2 路由懒加载出错
经过调试看到是路由懒加载的部分出错了，找到代码里，对应的是 src/store/modules/permission.js
```js
export const loadView = (view) => { // 路由懒加载
  return () => import(`@/views/${view}`)
}
```
#### 3.3 webpack 版本问题
了解到是 webpack 版本问题，webpack4 不支持变量方式的动态 import ，新版本的使用 require() 来解决此问题

#### 3.4 将加载方式修改成
```js
export const loadView = (view) => { // 路由懒加载
  // return () => import(`@/views/${view}`)
  return (resolve) => require([`@/views/${view}`], resolve)
}
```