软件研究之华夏ERP
1.前言
我使用华夏ERP进行部署和开发的时候,遇到的第一个问题就是this.getOption不是一个函数的问题,我降级了less等等操作,都不合适,最后我直接到就升级了package.json相关组件。
- nodejs v16.15.0
- npm v8.5.5
- nvm v0.39.1
- pnpm v7.14.0
- @vue/cli v5.0.6
- yarn v1.22.19
默认超管账户:admin,默认密码均为:123456
2.修改package.json
经过不断的错误尝试,版本升级、降级还有添加,最后形成的可用的配置文件 package.json 如下,这样就没有:this.getOptions is not a function 问题了。
1 | { |
3.配置文件vue.config.js
根据测试和修改结果,将vue.config.js的配置修改为如下内容:
1 | const path = require('path') |
4.修改样式
将 src/components/NumberInfo 文件夹下的index.less中的 :global 去掉,
1 | :global { |
改为如下内容:
1 | .anticon-caret-up { |
5.修改路由配置
不知道为什么会有循环引用的问题,需要将 src/config/router.config.js 文件中的 const 改为 var。
1 | /** |
改为
1 | export var constantRouterMap = [ |
6.导入数据
这里使用Dbeaver进行数据导入的时候,如果直接倒入数据的话,会出现乱码的问题。
(1) 新建数据库jsh_erp之后,选择utf-8编码,
(2) 右键数据库,选择SQL编辑器,新建sql编辑器,将脚本复制到编辑框中
(3) 然后右键编辑器,选择执行->选择执行脚本。
(4) 导入数据
7.修改mysql依赖
因为我系统里面安装的是mysql8.0,而华夏ERP使用的是mysql5.7,需要修改后端的mysql依赖
1 |
|
8.修改数据库配置
修改application.properties中的配置
1 | spring.datasource.username=root |
9.配置nginx
1 | server { |
10.自动化脚本
我这里因为给别人安装的是在windows下安装的,所以最好有一个windows的一键启动脚本,涉及到了nginx启动、java程序启动,还有一个网穿云的内网穿透工具的启动。
1 | rem 加入下面的代码,后台启动 |
1.windows nginx重启脚本.bat taskkill /f /fi “IMAGENAME eq nginx.exe”
2.Nginx windows下nginx启动bat脚本和安装 SET NGINX_DIR=E:\VMS\nginx-1.8.0\ #此处放加压目录
3.bat中代码注释的几种方法
4.bat脚本启动Java服务 这里还提供了脚本,判断java程序只启动一次的,若jar服务已启动则不启动,没有启动则先查看端口是否被其他进程占用,占用则释放端口后再启动的bat脚本代码。bat脚本双击运行后会出现黑色cmd的终端窗口,若不想出现该窗口,可让其后台启动运行。
5.Windows环境下使用bat脚本后台运行java或springboot项目的jar包
问题
(1) Less Loader has been initialized using an options object that does not match the API schema - options has an unknown property ‘modifyVars’.
原先的配置:
1 | module.exports = { |
【解决方法】
经过查找资料,发现了下面的这个配置
1 | css: { |
1.less-loader 升级 6.X 后在 webpack 配置 javascriptEnabled 报错解决
2.less-loader@7.3的vue.config.js配置
3.ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema 6.0刚出好像兼容方面有点问题,改成 lessOptions 就可以了。
4.ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. 这个也是有 lessOptions 这个配置。
(2) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
这个问题不知道出现在哪里,因为文件夹里有.md文件,本来应该是忽略的文件,最后还是被webpack处理了,所以就导致了不能识别的问题。Module parse failed: Unexpected character ‘ ‘
【解决方法】
后来我找到了相关的配置方法
1 | config.module |
1.webpack打包项目报错:You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
2.Vue WebPack忽略指定文件或目录方式 1.使用 null-loader;2.使用 url-loader;3.vue.config.js 中设置忽略文件,但是这个地方写的不是很明确。
3.在vue 中配置忽略某些文件或文件夹语法检查 eslint
4.webpack 相关 Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改。 process.env.NODE_ENV === ‘production’ 环境不同的配置,这是官方的说明。
5.module.rule(…).loader(…).use is not a function
6.一个超简单的 vue-markdown-loader 这里有rule的配置方法。
(3) Cannot set properties of undefined (setting ‘parent’)
我查看了错误代码,显示这个@import
1 | <style lang="less" scoped> |
【解决方法】
我找到了相关的less配置
1 | :global { |
修改为了,也就是去掉了global
1 | // :global { |
1.开发环境报错TypeError: Cannot set properties of undefined 注释 //@import “index”;
2.yarn run build 编译失败 并没有注释,只是把 :global {} 去掉了。去掉后,也不会污染其他CSS,或者被其他CSS污染。。。这两个类只会在 .sub-total 内部生效。
(4) ./mode/swift/swift.js is not exported from package
这个问题出在 codemirror 这个模块中。我找到了这个文件 JCodeEditor.vue 文件,发现里面的代码引入如下,但是在codemirror这个库下面没有mode文件夹,难道是我安装错了吗?
1 | // 需要引入具体的语法高亮库才会有对应的语法高亮效果 |
我发现最新的版本是 “codemirror”: “^6.0.1” 版本,但是老项目中使用的是5.46.0这个版本,这个版本的codemirror目录下,有mode文件夹。
1 | "codemirror": "^5.46.0", |
(5) Failed to resolve loader: null-loader
1.null-loader One use for this loader is to silence modules imported by a dependency. Say, for example, your project relies on an ES6 library that imports a polyfill you don’t need, so removing it will cause no loss in functionality.
(6) Emitted value instead of an instance of Error
(6) vue__WEBPACK_IMPORTED_MODULE_3__.createVNode is not a function
打开浏览器控制台,出现了这个问题,错误的版本如下:
1 | "vue": "^2.6.14", |
【尝试方法】
就是找到和vue匹配的vuex版本。
1 | "vue": "^2.6.14", |
后来我尝试把所有关于vue的插件的版本都降级,ant-design-vue、vue-i18n、vue-loader、vue-ls、vue-router ,还是会出现这个问题
【解决方法】
经过不断的尝试,删除修改插件的版本,最后 ant-design-vue@1.7.6;”less”: “3.9.0”;”less-loader”: “4.1.0”,但是具体到底是哪一个插件导致的这个问题,我暂时还没有办法找到问题。
1.Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_20__.reactive) is not a function - in Vue 2 Your version of Vue is not compatible with your version of Vuex.
2.vue报错:Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function 卸载当前vue-router版本, 使用低版本
3.CreativeVNode Is not a function
4.Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_3__.createVNode) is not a function_ 这个是 ant-design-vue 的版本
5.Ant Design Vue - 适配 Vue2.x 版本的安装与环境搭建(默认 npm 安装的是适用于 Vue3.x 的版本)解决 Vue2.x 与最新 Ant Design vue 版本不符的问题 Vue2 需要与 1.x 的 Ant design vue 版本进行对应。
6.vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function 一个defineCompenont函数没有定义
(7) Can’t resolve ‘@vue/babel-helper-vue-jsx-merge-props’
【解决方法】
重新安装这个插件就好了
1 | pnpm add @vue/babel-helper-vue-jsx-merge-props -D |
(8) BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a polyfill for it.
(9) Uncaught ReferenceError: can’t access lexical declaration ‘constantRouterMap’ before initialization
初始化前无法访问词法声明。 我查看了问题出现的代码,主要是 src/config/router.config.js 这个文件中的,
1 | /** |
【解决方法】
就是将const改为var,看参考文章中的说明,就是说这里可能是出现了循环依赖的问题。
1 | /** |
1.ReferenceError: can’t access lexical declaration ‘X’ before initialization
2.[Error “ReferenceError: can’t access lexical declaration `XXX’ before initialization” when loading a webpack-ed app](https://github.com/webpack/webpack/issues/9173) By using var instead of const you will receive undefined instead of the TDZ error. This probably lead to other issues. 将const替换为var
3.ReferenceError: can’t access lexical declaration ‘Foo’ before initialization A simple way to understand why this error happens involves understanding hoisting. Before execution, an interpreter (like a browser engine) will move all variables and functions to the top of the file, likely for ease of access. But more modern instances of variables and functions, such as classes and function expressions, might get hoisted to the top but without being initialized. This is why that although the class is found, it has no proper value assigned to it, even if empty, thus an error occurs.
(10) Inline JavaScript is not enabled
这个问题主要是less-loader版本配置不一样导致的问题。
【解决方法】
“less”: “3.9.0”, “less-loader”: “4.1.0” 这个版本配置的vue.config.js如下:
1 | css: { |
最新的版本,比如13版本,vue.config.js 配置内容如下,多加了一个 lessOptions 配置
1 | css: { |
(11) Cannot read properties of undefined (reading ‘compress’)
这是我在解决了上面的问题之后,在执行:pnpm build的时候出现的问题,看看配置文件,主要是下面的问题。
1 | configureWebpack: config => { |
【解决方法】
将 configureWebpack 修改为插件的形式,这样就不会有问题了。
1 | const TerserPlugin = require('terser-webpack-plugin') |
或者是修改为如下的内容,这样就可以根据不同的环境进行console.log的输出了
1 | configureWebpack: config => { |
1.Cannot read property ‘compressed’ of undefined
2.Vue配置vue.config.js打包时删除console.log日志 1.如果需要根据打包环境来判断是否需要删除;2. 通过配置configureWebpack的方式;
3.vue.config.js配置打包删除console和debugger
4.如何在vue.config.js中配置vue-cli3.0打包之后不显示console 如果用 chainWebpack 改配置的话注意我们考虑到兼容性的原因还没有升级 webpack-chain v5,v4 和 v5 唯一的区别就是改 minimizer 的方法。这里还有 configureWebpack: config => { if (process.env.NODE_ENV === ‘production’) { config.optimization.minimizer[0].options.terserOptions.compress[‘drop_console’] = true } } 这种方法,但是我的里面用不上。
5.TerserWebpackPlugin
(12) 中文乱码
在经历了无数的磨难之后,终于算是启动了前端和后端,可是还有一个问题,就是中文乱码的问题。
【解决方法】
这个主要是在导入数据库的时候的问题,具体方法,可以参考Post not found: DBeaver数据库管理工具 DBeaver数据库管理工具
(13) Error in callback for watcher “activePage”: “TypeError: can’t access property “catch”, originalPush.call(…) is undefined
在浏览器上显示这个错误:TypeError: can’t access property “catch”, originalPush.call(…) is undefined,定位到 src/router/index.js 文件,
1 | import Vue from 'vue' |
【解决方法】
在vue-router在3.1.0版本之后,push和replace方法会返回一个promise对象,如果跳转到相同的路由,就报promise uncaught异常,我通过安装高版本的vue-router解决了这个问题。
1 | ## 卸载 |
注意:要新启动server,这个比较重要
1.关于js的call方法的返回值问题
2.vue-router重写push方法,解决相同路径跳转报错 这里就是上面的代码,基本上一致
3.const originalPush = VueRouter.prototype.push // 重写了原型上的push方法,统一的处理了错误信息 VueRouter.prototype.pus… 在vue项目中,如果使用$router.push跳转到一个相同的路由,就会遇到以下错误。方案01-降版本;方案2-使用catch捕获异常;方案3-修改push方法
4.vue-router重写Router.prototype.push,解决相同路径跳转的报错问题 在router的index.js里面写,在use之前,如果加上以下代码,报错‘Cannot read properties of undefined (reading ‘catch’) at VueRouter.push ’那就是vue-router的版本问题,安装高一点的版本即可3.1.6以上
(14) Public Key Retrieval is not allowed
这里的主要场景就是:禁用 SSL/TLS 协议传输切当前用户在服务器端没有登录缓存的情况下,客户端没有办法拿到服务器的公钥。
【解决方法】
- 1.在 JDBC 连接串中加入 allowPublicKeyRetrieval=true 参数;
- 2.在 CLI 客户端连接时加入–get-server-public-key 参数;
- 3.在 CLI 客户端连接时加入–server-public-key-path=file_name 参数,指定存放在本地的公钥文件。
1.Public Key Retrieval is not allowed解决 在 JDBC 连接串中加入 allowPublicKeyRetrieval=true 参数