vue-admin-template 后台模版初始化及问题汇总

news2024/10/6 6:20:21

参考：https://segmentfault.com/a/1190000023185109?sort=votes

问题一：Unsupported engine

后来经过分析，发现，element-ui 的版本依赖锁定是在一个叫做package-locak.json 中，并且找到了相关配置。

package-lock.json 修改配置如下：

    "node_modules/@achrinza/node-ipc": {
      "version": "9.2.2",
      "resolved": "https://registry.npmmirror.com/@achrinza/node-ipc/-/node-ipc-9.2.2.tgz",
      "integrity": "sha512-b90U39dx0cU6emsOvy5hxU4ApNXnE3+Tuo8XQZfiKTGelDwpMwBVgBP7QX6dGTcJgu/miyJuNJ/2naFBliNWEw==",
      "dev": true,
      "dependencies": {
        "@node-ipc/js-queue": "2.0.3",
        "event-pubsub": "4.3.0",
        "js-message": "1.0.7"
      },
      "engines": {
        "node": "8 || 10 || 12 || 14 || 16 || 17 || 18"
      }
    },

问题二：4058报错 syscall open

原因就是找不到package.json
解决很简单：

多数人此时都在myvue的上一级目录运行npm run dev
在这里插入图片描述
此时自然没有package.json

正确做法：
在这里插入图片描述进入到myvue目录，执行启动。此时自然找到了package.json

问题三：Error: error:0308010C:digital envelope routines::unsupported

原因是版本不兼容引起的，在package.json添加以下命令即可：

运行命令前面加上 set NODE_OPTIONS=--openssl-legacy-provider

"build": "set NODE_OPTIONS=--openssl-legacy-provider && umi build",
"deploy": "npm run build && npm run gh-pages",
"dev": "set NODE_OPTIONS=--openssl-legacy-provider && npm run start:dev",

再次执行npm run serve，即可成功。

问题四：vue-admin-template框架在兼容模式下chunk-vendors.js 语法错误，打开空白

chunk-vendors.js (7819,38)语法报错：

点开后代码定格在这行：

1. 解决方法：因为定格“sockjs-client/dist/sockjs.js”，所以在vue.config.js中添加transpileDependencies参数配置sockjs-client

2. 终端安装babel-polyfill

npm install --save babel-polyfill

其次在main.js中导入

import 'babel-polyfill';

3. 主要在babel.config.js 中添加入口命令即可

module.exports = {
    presets: [
        '@vue/app',
        [
            '@babel/preset-env',
            {
                useBuiltIns: 'entry'
            }
        ]
    ]
}

再次运行项目，IE模式下终于成功！