DVA环境配置时出错： SQLite does not support JSONFields以及vue和vue-template-compiler版本不匹配的错误

---

一、背景

最近公司准备做一个后台管理系统，于是就在网上找了一下有关后台管理系统的开源项目，最终找到一款用python开发的功能强大的后台管理系统的开源项目 – Django-Vue-Admin
具体介绍：Django-Vue-Admin文档
在把项目克隆到本地后，按照官方文档配置环境过程中出现了一些问题，以此记录

---

二、后端配置时报错

1、报错内容

按照官方给出的文档操作：

1. 进入后端项目目录:cd backend
2. 在项目根目录中，复制 ./conf/env.example.py 文件为一份新的到 ./conf/env.py
   下，并重命名为env.py
3. 在 env.py 中配置数据库信息(默认数据库为sqlite3，测试演示可忽略此步骤)
4. 安装依赖环境: pip3 install -r requirements.txt
5. 执行迁移命令: python3 manage.py makemigrations python3 manage.py migrate
6. 初始化数据: python3 manage.py init
7. 初始化省市县数据: python3 manage.py init_area
8. 启动项目: python3 manage.py runserver 0.0.0.0:8000

当我们在操作第5步 python3 manage.py migrate 时，遇到如下问题：

ERROR:(fields.E180) SQLite does not support JSONFields.

2、问题原因

很可能是你本机安装的SQLite版本与当前Windows环境不兼容，你需要更换新的sqlite3.dll

3、解决方法

1、先检查您的 python 安装 - 是 32 位还是 64 位
2、到https://www.sqlite.org/download.html下载对应版本(32 位或 64 位)
3、找到您的 Python 安装路径，里面有一个DLLS文件夹，将DLLS文件夹中原有的sqlite3.dll删除
4、将新下载的sqlite3.dll放到DLLS文件夹下
5、重新运行python3 manage.py migrate ，数据迁移成功
具体可参考：https://stackoverflow.com/questions/62637458/django-3-1-fields-e180-sqlite-does-not-support-jsonfields
后端服务启动成功：

---

三、前端配置时报错

1、报错内容

按照官方文档操作：

1. 进入前端项目目录 cd web
2. 安装依赖 npm install --registry=https://registry.npm.taobao.org
3. 启动服务 npm run dev

在操作到第三步，nup run dev 启动vue项目时，报错：

ERROR  Error:
Vue packages version mismatch:

- vue@2.6.10 (E:\nodejs\node_global\node_modules\vue\dist\vue.runtime.common.js)

- vue-template-compiler@2.6.11 (E:\nodejs\node_global\node_modules\@vue\cli\node
_modules\vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for
 both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify sho
uld bump vue-template-compiler to the latest.

2、报错原因

因为你的vue版本和vue-template-compiler版本不一致导致的。我们可以到项目中web/package.json查看，就会发现文件中vue和vue-template-compiler指定的版本不一样。(注：我这里用的nodejs版本为16.17.0，如果你用的是高版本，以下方法可能不适用)

3、解决方法

手动修改项目中web/package.json文件，将vue和vue-template-compiler版本改成一样：


然后

1. 清除缓存 npm cache clean --force
2. 重新安装依赖 npm install --registry=https://registry.npm.taobao.org
3. 启动服务 npm run dev

前端服务启动成功：