vue-admin-temple和vue-element-admin安装、运行及问题解决

1.环境准备

目前在windows环境下进行安装，需要具备node.js、git环境等。

1）node安装

下载地址：下载 | Node.js 中文网

下载最新版本即可。

2）git安装

下载地址：Git 

2.vue-element-admin安装与运行

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

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

# 启动服务
npm run dev

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

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

# 预览发布环境效果
npm run preview

# 预览发布环境效果 + 静态资源分析
npm run preview -- --report

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix

3.vue-admin-temple安装与运行

# 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git

# 进入项目目录
cd vue-admin-template

# 安装依赖
npm install

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

# 启动服务
npm run dev

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

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

# 预览发布环境效果
npm run preview

# 预览发布环境效果 + 静态资源分析
npm run preview -- --report

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix

4.运行报错解决

现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响.

在node.js V17以前一些可以正常运行的的应用程序,但是在 V17 版本及以上可能会抛出以下异常:

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\git\vue-admin\vue-admin-template\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\git\vue-admin\vue-admin-template\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\git\vue-admin\vue-admin-template\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\git\vue-admin\vue-admin-template\node_modules\webpack\lib\NormalModule.js:503:5
    at D:\git\vue-admin\vue-admin-template\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\git\vue-admin\vue-admin-template\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\git\vue-admin\vue-admin-template\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (D:\git\vue-admin\vue-admin-template\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\git\vue-admin\vue-admin-template\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\git\vue-admin\vue-admin-template\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at D:\git\vue-admin\vue-admin-template\node_modules\graceful-fs\graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'

解决：

windows下设置如下命令：

set NODE_OPTIONS=--openssl-legacy-provider

linux下设置：

export NODE_OPTIONS=--openssl-legacy-provider

运行页面如下：