window 7构建Vue前端运行环境

一、环境准备
操作系统为:window 7
1、卸载已安装的Nodejs
安装nvm需要先将系统中安装的Nodejs先卸载掉

image.png

image.png

image.png

node_mirror: http://npmmirror.com/mirrors/node/
npm_mirror: http://registry.npmmirror.com/mirrors/npm/

image.png

4、安装nodejs和使用nodejs
安装nodejs

nvm install 13.14.0

5、如遇到如下报错，需要自己下载和解压npm，如未遇到直接跳过本步骤

image.png

报错信息

Downloading npm version 6.14.4... Download failed. Rolling Back.
E:\devtools\nvm\temp\npm-v6.14.4.zip
Rollback failed. remove E:\devtools\nvm\temp\npm-v6.14.4.zip: The process cannot access the file because it is being u
sed by another process.
Could not download npm for node v13.14.0.
Please visit https://github.com/npm/cli/releases/tag/v6.14.4 to download npm.
It should be extracted to E:\devtools\nvm\v13.14.0

解决办法:
5.1、https://github.com/npm/cli/releases/tag/v6.14.4

image.png

image.png

image.png

nvm use 13.14.0

其他可选择使用的nvm的命令如下：
查看安装的nodejs所有版本

nvm list

如果要卸载nodejs

nvm uninstall

二、前台代码构建
1、初始化项目
在项目chat-bot-web目录下，终端执行 vue create 项目名

npm config set strict-ssl false
npm install -g @vue/cli@4.5.15
vue create chat-bot-frontend
cd chat-bot-frontend
npm run serve

如果遇到“certificate has expired”的错误，如果没有遇到，则直接跳过
npm ERR! request to https://registry.npm.taobao.org/ failed, reason: certificate ha
执行下面的命令，关闭SSL校验

npm config set strict-ssl false

执行vue create chat-bot-frontend后需要选择一下

image.png

看到如下命令，就是项目创建成功

image.png

cd chat-bot-frontend
npm run serve

如果遇到如下报错
ERROR Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package.json' is not defined by "exports" in E:\Idea
Projects\chat-bot-web\chat-bot-frontend\node_modules@vue\compiler-sfc\package.json

,
  "exports": {
    ".": "./src/index.js",
    "./package.json": "./package.json"
  }

如果遇到如下报错
Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.

npm install vue@^3.2.13 --save
npm install @vue/compiler-sfc --save-dev
rm -rf node_modules （cmd命令行执行 rd /s /q node_modules）
rm package-lock.json  （cmd命令行执行  package-lock.json）
npm install # 或 yarn install

npm uninstall -g @vue/cli # 卸载旧版
npm install -g @vue/cli@4.5.15 # 安装指定版本

如果有如下报错，直接到Defaults.js文件中将错误的地方修改掉，将os.hostname()改为'localhost'
SystemError [ERR_SYSTEM_ERROR]: A system error occurred: uv_os_gethostname returned ENOSYS (function not implemented)
at Object.<anonymous> (E:\devtools\nvm\v16.16.0\node_modules@vue\cli\node_modules@achrinza\node-ipc\entities\Defaults.js:10:4)

image.png

# 1. npm升级到最新版本
npm install -g npm@latest
# 2. 安装依赖
npm install
# 3. 安装包
npm install package_name
# 4. 移除包
npm uninstall package_name
# 5. 获取镜像源
npm config get registry
# 6. 更换国内源
npm config set registry https://registry.npmjs.org/
# 6. 更换淘宝镜像
npm config set registry=https://registry.npm.taobao.org  
# 7. 恢复官方源
npm config set registry https://registry.npmmirror.com

最终运行的版本

nvm 1.1.10
node v16.16.0
npm 8.19.1
@vue/cli 5.0.8

image.png

2、安装 Axios (用于HTTP请求)
npm install axios
3、到src/components创建聊天组件 (ChatView.vue)
4、更新主应用 (App.vue)