vue-cli2 与 vue-cli3 共存

  |  

vue-cli2 与 vue-cli3 共存

摘要:介绍两种vue-cli2与vue-cli3共存的方案,推荐第二种。


一、环境变量区分

  • 创建安装目录:
    选择一个目录,这里以 F:\Vue-cli 为例,在目录下创建 vue2vue3 两个目录;
  • 局部安装 vue-cli2
    进入 vue2 目录下,执行 npm install vue-cli,重命名 ./node_modules/.bin 目录下的文件 vuevue2vue.cmdvue2.cmd ;
  • 局部安装 vue-cli3
    进入 vue3 下目录,执行 npm install @vue/cli,重命名 ./node_modules/.bin 目录下的文件 vuevue3vue.cmdvue3.cmd ;
  • 配置环境变量:
    创建 vue2 系统变量,变量值为 F:\Vue-cli\vue2\node_modules.bin*,创建 *vue3 系统变量,变量值为 F:\Vue-cli\vue3\node_modules.bin,环境变量创建成功后要重启 cmd 命令窗;
  • 测试指令:
    使用 vue-cli2 创建项目,指令为 vue init <template-name> <project-name>,使用 vue-cli3 创建项目,指令为 vue create <project-name>,两者互不影响。

二、使用桥接工具【推荐】

官方参考地址

  • 全局安装 vue-cli3:
    执行 npm install -g @vue/cli;
  • 全局安装桥接工具:
    执行 npm install -g @vue/cli-init;
  • 测试指令:
    使用 vue-cli2 创建项目,指令为 vue init <template-name> <project-name>,使用 vue-cli3 创建项目,指令为 vue create <project-name>,两者互不影响。

 评论